Длинный текст в столбце начальной загрузки влияет на следующие столбцы

Question

Этот Plunkr демонстрирует проблему, которую я вижу. я добавил цвет фона, чтобы выделить проблему

Обратите внимание, что, чтобы увидеть эту проблему, вам нужно будет просмотреть plunkr в окне просмотра всплывающих окон - или панель предварительного просмотра шириной не менее 800 пикселей. См. Изображение ниже, чтобы нажать кнопку, если вы никогда этого не делали раньше. Как только выскочите, сделайте экран немного больше.

По сути, то, что я нахожу, если у меня есть, скажем, 4 `Col-SM-6' , они обычно сидят бок о бок, давая мне 2 колонки и 2 строки.

Это все нормально, пока в одном из дочерних элементов не будет длинного текста. Это затем выталкивает следующие ячейки вне выравнивания.

Я уверен, что это простое исправление, но оно ускользает от меня ... Любые мысли?

И код в Plunkr является:

<div class="container"> 
    <div class="row"> 
    <div class="form-horizontal"> 
    <div class="col-sm-6"> 
     <div class="form-group"> 
      <label class="col-lg-5 control-label">Company</label> 
      <div class="col-lg-6">A really long company name fs df sd fsdfsdfsdf sdf s df sd f sdf sd f sdfsdfsdfsdf</div> 
     </div> 
    </div> 
    <div class="col-sm-6"> 
     <div class="form-group"> 
      <label class="col-lg-5 control-label">XYZ</label> 
      <div class="col-lg-6">Something</div> 
     </div> 
    </div> 
    <div class="col-sm-6"> 
     <div class="form-group"> 
      <label class="col-lg-5 control-label">XYZ</label> 
      <div class="col-lg-6">Something</div> 
     </div> 
    </div> 
    <div class="col-sm-6"> 
     <div class="form-group"> 
      <label class="col-lg-5 control-label">XYZ</label> 
      <div class="col-lg-6">Something</div> 
     </div> 
    </div> 
    </div> 
    </div> 
</div> 

Answer 1

Попробуйте с двумя подряд

<div class="container"> 
    <div class="form-horizontal"> 
    <div class="row"> 
     <div class="col-sm-6"> 
      <div class="form-group"> 
       <label class="col-lg-5 control-label">Company</label> 
       <div class="col-lg-6">A really long company name fs df sd fsdfsdfsdf sdf s df sd f sdf sd f sdfsdfsdfsdf</div> 
      </div> 
     </div> 
     <div class="col-sm-6"> 
      <div class="form-group"> 
       <label class="col-lg-5 control-label">XYZ</label> 
       <div class="col-lg-6">Something</div> 
      </div> 
     </div> 
    </div> 
    <div class="row" > 

     <div class="col-sm-6"> 
      <div class="form-group"> 
       <label class="col-lg-5 control-label">XYZ</label> 
       <div class="col-lg-6">Something</div> 
      </div> 
     </div> 
     <div class="col-sm-6"> 
      <div class="form-group"> 
       <label class="col-lg-5 control-label">XYZ</label> 
       <div class="col-lg-6">Something</div> 
      </div> 
     </div> 
    </div> 
    </div> 
</div>