Поместите дивы рядом друг с другом

Как изменить следующий код:Поместите дивы рядом друг с другом

<div class="col-lg-8" ng-repeat="contact in [{name:'Jim'},{name:'Joe'},{name:'Dan'}]"> 
     <div class="col-lg-3"> 
      <div>{{contact.name}}</div> 
     </div>  
    </div>

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

источник

2017-02-17 Unknown developer

'div' - элемент блока. Элементы блоков выравниваются по столбцам. Следующий вопрос (ы), который следующий: вы действительно хотите элемент блока, или вы хотите использовать flexbox для этого? – Makoto

'float: left' - ваш друг –

Собственно, вместо имен у меня есть divs, которые содержат некоторую информацию о каждом клиенте. Я хочу поместиться как можно больше в размере lg-8, и в то же время это должно быть ответственным –

Обратите внимание, что ваш текущий html-код будет повторяться <div class="col-lg-8"> три раза. Вы, вероятно, хотите, чтобы изменить его следующим образом:

<div class="col-lg-9"> 
    <div class="row"> 
     <div class="col-lg-4" ng-repeat="contact in [{name:'Jim'},{name:'Joe'},{name:'Dan'}]"> 
      <div>{{contact.name}}</div> 
     </div> 
    </div> 
</div>

Это будет производить три <div class="col-lg-4"> быть в хорошей форме в <div class="col-lg-9">.

источник

2017-02-17 17:48:36 Pejman

Это будет неправильный код начальной загрузки. A .col-xxx должен находиться внутри .row. В противном случае интервалы и поля будут неправильными. –

Конечно. Я предполагаю, что OP имеет элемент оболочки с 'class =" row "' перед этим кодом. – Pejman

Ваш ответ помещает .col-lg-3 непосредственно внутри .col-lg-9, поэтому он не соблюдает правила загрузки. Почему OP и все остальные читатели предполагают, что в ваш ответ должен быть добавлен код .row? Почему бы не исправить код? –

Поместите дивы рядом друг с другом

ответ

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