Бутстрап текст строки, нажимающий столбцы вниз

Question

У меня возникли проблемы с простой компоновкой, используя twitter bootstrap 3.0. Проблема возникает, когда у меня слишком много текста в моем контенте, и это толкает коннов. Я не уверен, что я правильно структурирую вещи. Вот мой HTML

<div data-bind="foreach: items" class="row"> 
     <div class="col-sm-4" > 
      <div > 
       <div> 
        <strong>Field:</strong> <span data-bind="text: Field"></span><br /> 
        <strong>Field:</strong> <span data-bind="text: Field"></span><br /> 
        <strong>Field:</strong> <span data-bind="text: Field"></span><br /> 
        <strong data-bind="text: Field">Field</strong> 
       </div> 
       <div class="container"> 
        <img class="img-rounded" data-bind="attr: { src: Field}" /> 
       </div> 
       <div > 
        <button type="button" class="btn btn-danger btn-sm" id="dislike" > 
         <span class="glyphicon glyphicon-thumbs-down"></span> 
        </button> 
        <button type="button" class="btn btn-success btn-sm"> 
         <span class="glyphicon glyphicon-thumbs-up"></span> 
        </button> 
        <audio class="audioStream" oncanplay="" preload="none"> 
         <source src="" /> 
        </audio> 
        <button type="button" class="btn btn-primary btn-sm audioPlayer"> 
         <span class="glyphicon glyphicon-play audioPlayerIcon"></span> 
        </button> 
       </div> 
      </div> 
     </div> 

Я ожидал получить такой вывод (который я, если текст короткий)

Вместо этого он показывает, как

Я полагаю, я мог бы вероятно, исправить проблему, создав новый div с class = "row" каждые три записи, но я не думаю, что мне действительно нужно это делать. Возможно, я неправильно использую сетку в этом случае использования. Мое намерение состояло в том, чтобы получить отзывчивый дизайн, который повернул бы вертикаль на более мелкие экраны. Вот почему я не использовал таблицы. Любая помощь приветствуется. Если мне нужно предоставить дополнительную информацию, дайте мне знать.

Answer 1

Используйте классы столбцов с фиксированной сеткой, такие как «col-md-2» для всех этих трех разделов контента в строке со смещением между каждым из них с помощью «col-md-offset-1», это даст пробелы между их и текст вашего контента никогда не будут распространяться, как в приведенном выше изображении, поддерживая фиксированную ширину.