Boostrap, не создающий 4 столбца

Это, вероятно, легкий, но я новичок в бутстрапе и не совсем знаком с тем, как он работает. У меня есть следующий код для создания четырех столбцов ширины столбца в строке. Но он продолжает отображаться как четыре вертикально уложенных столбца на моем ноутбуке (1920x1080), и я не совсем уверен, где я делаю это неправильно.Boostrap, не создающий 4 столбца

<div class="container"> 
      <div class="row-fluid"> 
       <div class="col-md-3"><!--about us feature 1st --> 
        <div class="about-block"> 
         <div class="heading"> 
          <h6>AVAILABILITY</h6> 
          <p>Fast Response Time<br> 15 Minutes Setup</p> 
         </div> 
        </div> 
       </div><!--about us feature 1st closed --> 
       <div class="col-md-3"><!--about us feature 2nd --> 
        <div class="about-block"> 
         <div class="heading"> 
          <h6>SPEED</h6> 
          <p>Average 7x Faster<br> Complete Data Coverage</p> 
         </div> 
        </div> 
       </div> <!--about us feature 2nd closed --> 
       <div class="col-md-3"><!--about us feature 3rd --> 
        <div class="about-block"> 
         <div class="heading"> 
          <h6>SAFETY</h6> 
          <p>Reduce Human Risk<br> No Scaffolding</p> 
         </div> 
        </div> 
       </div><!--about us feature 3rd closed --> 
       <div class="col-md-3"><!--about us feature 4th --> 
        <div class="about-block"> 
         <div class="heading"> 
          <h6>COST SAVINGS</h6> 
          <p>Targeted Repairs<br> Less Outage Time</p> 
         </div> 
        </div> 
       </div><!--about us feature 4th closed --> 
      </div> 
     </div>

UPDATE Добавлен скриншот:

источник

2016-05-17 Alvin C

Показывает 4 столбца на одной строке для меня (на моем рабочем столе). Может быть, снять скриншот, чтобы показать нам? –

Пожалуйста, отправьте свой css тоже. –

Спасибо всем за помощь! Я обнаружил, что проблема в том, что локальный файл bootstrap css по умолчанию был переопределен, чтобы изменить поведение отображения столбцов. Решила его, обновив bootstrap css. –

Используйте col-sm-3 вместо этого, или сделать свой <div> элемент шире. Если вы используете контейнер непосредственно внутри тела, у вас не должно быть никаких проблем. Если вы используете внутри другого элемента, убедитесь, что он достаточно широкий.

источник

2016-05-17 16:16:34

просто попробовал. такой же выпуск. –

Невозможно увидеть проблему: https://jsfiddle.net/DTcHh/20621/. Двойное разрешение экрана и отправьте снимок экрана для нас. –

из вашей ссылки, он показывает 1 вертикально уложенную колонку, что является моей проблемой. То, что я действительно хочу, - это 4 столбца в одной строке. –

Сначала попробуйте изменить row-fluid класс на style="float: left". Во-вторых, это правда, что (теоретически) экран разделен на 12, но 3 * 4 может быть более 12 (край, граница и т. Д.). Если первая часть отображает три столбца и четвертый снизу, попробуйте уменьшить размер столбцов, установив, например, width = 24%.

источник

2016-05-17 16:21:10 FDavidov

Я попробовал style = "float: left". Он выравнивается по левому краю, а не выравнивается по центру. Но он по-прежнему показывает 1 столбец с 4 блоками, вертикально уложенными вместо 4 столбцов в одну строку. –

Вы пытались установить стиль для внешнего div? – FDavidov

Boostrap, не создающий 4 столбца

ответ

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