Как выровнять эти поля с помощью бутстрапа?

Вот код:Как выровнять эти поля с помощью бутстрапа?

<div class="row" > 
    <div id="box1" class="col-lg-4 box"style=""> 
     <img src="images/1.png" style="" class="num-img"> 
     <a href="#" style="text-decoration:none;color:#fff;">box 1 content</a> 
    </div> 
    <div id="box2" class="col-lg-4 box" style=""> 
     <img src="images/2.png" style="" class="num-img"> 
     <a href="#" style="text-decoration:none;color:#fff;">box 2 content</a> 
    </div> 
    <div id="box3" class="col-lg-4 box" style=""> 
     <img src="images/3.png" style="" class="num-img"> 
     <a href="#" style="text-decoration:none;color:#fff;">box 3 content</a> 
    </div> 
</div>

CSS коробки:

.box 
{ 
    height: 130px; 
    width: 200px; 
    background-color: #000; 
    color: #FFF; 
    padding: 20px; 
    font-size: 30px; 
    text-align: center; 
}

Это, как я хочу, чтобы это выглядело как:

Вот как это выглядит сейчас:

И вот как это выглядит, когда я удалить box класс и написать:

<div id="box1" class="col-lg-4 "style="">

Как это исправить ??

Update (после добавления margin:0 auto):

источник

2015-09-21 Nivedita

Возможно, вы переопределяете widthcol-lg-4divs, в зависимости от того, когда загружен ваш box css. Попробуйте

<div id="box1" class="col-lg-4"> 
    <div class="box"> 
     <img src="images/1.png" style="" class="num-img"> 
     <a href="Search.jsp" style="text-decoration:none;color:#fff;">box 1 content</a> 
    </div> 
</div>

Это не заставит col-lg-4 DIV иметь множество px ширину, но вместо % с внутренней div, имеющей множество width.

Если вы хотите центрировать блоки в бутстрапе cols, добавьте margin: 0 auto; в ваш box css.

.box 
{ 
    height: 130px; 
    width: 200px; 
    background-color: #000; 
    color: #FFF; 
    padding: 20px; 
    font-size: 30px; 
    text-align: center; 
    margin: 0 auto; 
}

пример использования вашего fiddle

источник

2015-09-21 09:04:51

Спасибо, что коробки теперь выровнены, но пространство слева немного меньше, чем правое, т. Е. Они не в центре. Как на 3-м снимке экрана. – Nivedita

создайте плункер/кодировщик, и я могу взглянуть на него –

https: // jsfiddle.net/v8xUL/453/ – Nivedita

Добавить col-offset-2 со всеми классами Col, и вы увидите изменения. изменение col-offset-2 согласно требованию.

источник

2015-09-21 09:04:31

Без изменений :(.... – Nivedita

Да, он используется для предоставления поля для столбцов. Вы можете написать текстовый центр. –

Или вы можете обернуть коробку в колонке, как это ..

<div class="row" > 
     <div id="box1" class="col-lg-4"style=""> 
      <div class="box"> 
      <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/2/26/Paris_m_2_jms.svg/50px-Paris_m_2_jms.svg.png" style="" class="num-img"> 
      <a href="#" style="text-decoration:none;color:#fff;">box 1 content</a> 
      </div> 
     </div> 
     <div id="box2" class="col-lg-4" style=""> 
      <div class="box"> 
       <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/2/26/Paris_m_2_jms.svg/50px-Paris_m_2_jms.svg.png" style="" class="num-img"> 
       <a href="#" style="text-decoration:none;color:#fff;">box 2 content</a> 
      </div> 
     </div> 
     <div id="box3" class="col-lg-4" style=""> 
      <div class="box"> 
       <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/2/26/Paris_m_2_jms.svg/50px-Paris_m_2_jms.svg.png" style="" class="num-img"> 
       <a href="#" style="text-decoration:none;color:#fff;">box 3 content</a> 
      </div> 
     </div> 
</div>

источник

2015-09-21 09:12:26 choz

Пожалуйста, проверьте эту:

<html lang="en"> 
<head> 
    <title>Bootstrap Example</title> 
    <meta charset="utf-8"> 
    <meta name="viewport" content="width=device-width, initial-scale=1"> 
    <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css"> 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script> 
    <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script> 
<style> 
.box 
{ 
    height: 130px; 
    width: 200px; 
    background-color: #000; 
    color: #FFF; 
    padding: 20px; 
    font-size: 30px; 
    text-align: center; 
} 


</style> 
</head> 
<body> 

<div class="row" > 
     <div id="box1" class="col-lg-4 text-center"> 
      <div class="box" style = "display:inline-block"> 
      <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/2/26/Paris_m_2_jms.svg/50px-Paris_m_2_jms.svg.png" style="" class="num-img"> 
      <a href="#" style="text-decoration:none;color:#fff;">box 1 content</a> 
      </div> 
     </div> 
     <div id="box2" class="col-lg-4 text-center" style=""> 
      <div class="box" style = "display:inline-block"> 
       <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/2/26/Paris_m_2_jms.svg/50px-Paris_m_2_jms.svg.png" style="" class="num-img"> 
       <a href="#" style="text-decoration:none;color:#fff;">box 2 content</a> 
      </div> 
     </div> 
     <div id="box3" class="col-lg-4 text-center" style=""> 
      <div class="box" style = "display:inline-block"> 
       <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/2/26/Paris_m_2_jms.svg/50px-Paris_m_2_jms.svg.png" style="" class="num-img"> 
       <a href="#" style="text-decoration:none;color:#fff;">box 3 content</a> 
      </div> 
     </div> 
</div> 

</body> 
</html>

CodePen: http://codepen.io/anon/pen/ZbOKKw

источник

2015-09-21 09:34:34

Почему вы использовали 'display: inline-block'? – Nivedita

дисплей: встроенный блок задан, поскольку внешний div дал text-align –

Как выровнять эти поля с помощью бутстрапа?

ответ

Смежные вопросы