коррекция бутстрапа без переопределений

Question

Im new to bootstrap и раньше не использовал свою сетку. Я пытаюсь использовать полную сетку и имеет один DIV 1-5 и один 8-12 поэтому каждый ДИВ Col-LG-5.

Im пытается не переопределить там CSS, чтобы сохранить его в чистоте, у меня, похоже, проблема с float: left. Насколько я могу судить по документации, я правильно использую систему, но ее не работает, второй div падает до следующей строки.

МОЙ КОД

<div class="row"> 
      <div class="col-xs-6 col-lg-5 well well-lg"> 
       <h2>Heading</h2> 
       <p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor 
        mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada 
        magna mollis euismod. Donec sed odio dui. </p> 
      </div> 

      <div class="col-xs-6 col-lg-5 col-lg-offset-7 well well-lg"> 
       <h2>Heading</h2> 
       <p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor 
        mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada 
        magna mollis euismod. Donec sed odio dui. </p> 
      </div> 
     </div> 

Answer 1

Ваша ошибка состоит в том, что у вас есть два различных .col-lg-5 дивы в одной строке, и вы добавили .col-lg-offset-7 класс второй (5 + 5 + 7 = 17). Однако класс смещения должен быть .col-lg-offset-2 не должен превышать 12 столбцов сетка.

<div class="row"> 
    <div class="col-xs-6 col-lg-5 well well-lg"> 
     <h2>Heading</h2> 
     <p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor 
      mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada 
      magna mollis euismod. Donec sed odio dui. </p> 
    </div> 

    <div class="col-xs-6 col-lg-5 col-lg-offset-2 well well-lg"> 
     <h2>Heading</h2> 
     <p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor 
      mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada 
      magna mollis euismod. Donec sed odio dui. </p> 
    </div> 
</div> 

Вот другие примеры для вас, чтобы понять, как работает система сетки:

<div class="row"> 
    <div class="col-md-4">.col-md-4</div> 
    <div class="col-md-4 col-md-offset-4">.col-md-4 .col-md-offset-4</div> 
</div> 

<div class="row"> 
    <div class="col-md-3 col-md-offset-3">.col-md-3 .col-md-offset-3</div> 
    <div class="col-md-3 col-md-offset-3">.col-md-3 .col-md-offset-3</div> 
</div> 

<div class="row"> 
    <div class="col-md-6 col-md-offset-3">.col-md-6 .col-md-offset-3</div> 
</div>