Разделители столбцов Bootstrap охватывают всю ширину контейнера вместо ширины столбца

-2

Я пытаюсь сделать макет с тремя равными столбцами. В третьем столбце я хочу два ряда из двух блоков равной ширины. По какой-то причине столбцы не покрывают ширину 1/3, а ширину всей страницы. Я включил свой HTML и соответствующий CSS ниже.Разделители столбцов Bootstrap охватывают всю ширину контейнера вместо ширины столбца

<div id="about-me" class="container"> 
    <div class="row"> 
     <div class="sm-col-4 md-col-4 lg-col-4 xl-col-4"></div> 
     <div class="sm-col-4 md-col-4 lg-col-4 xl-col-4"></div> 
     <div class="sm-col-4 md-col-4 lg-col-4 xl-col-4"> 
      <div class="row"> 
       <div class="sm-col-6 md-col-6 lg-col-6 xl-col-6 simple-image-box"></div> 
       <div class="sm-col-6 md-col-6 lg-col-6 xl-col-6 simple-image-box"></div> 
      </div> 
      <div class="row"> 
       <div class="sm-col-6 md-col-6 lg-col-6 xl-col-6 simple-image-box"></div> 
       <div class="sm-col-6 md-col-6 lg-col-6 xl-col-6 simple-image-box"></div> 
      </div> 
     </div> 
    </div> 
</div>

Вот CSS:

#about-me { 
    height: 100vh; 
} 
.simple-image-box { 
    height: 50px; 
    padding: 10px; 
    width: 40%; 
    color: cadetblue; 
}

источник

2016-06-05 lexicon

Имя класса см-цв-4 должен быть заменен на Col-см-4. Попробуйте также заменить все остальные имена столбцов. –

Кроме того, поскольку bootstrap является мобильным первым, вам нужно только col-sm-4. Если вы хотите, чтобы оно занимало одинаковое количество столбцов при каждом размере экрана, вам просто нужен самый маленький. Он по-прежнему будет применяться для средних и больших экранов. Размеры каскада вверх. – jtmingus

Не могу поверить, что я этого не видел. Теперь три столбца работают, но ящики по-прежнему не остаются рядом друг с другом, чтобы создать сетку 2x2. Все четыре просто стек вертикально. – lexicon

Вы писали type-col-number вместо col-type-number.

HTML:

<div id="about-me" class="container"> 
    <div class="row"> 
     <div class="col-sm-4 col-md-4 col-lg-4 col-xl-4"></div> 
     <div class="col-sm-4 col-md-4 col-lg-4 col-xl-4"></div> 
     <div class="col-sm-4 col-md-4 col-lg-4 col-xl-4"></div> 
    </div> 
    <div class="row"> 
     <div class="col-sm-6 col-md-6 col-lg-6 col-xl-6 simple-image-box"></div> 
     <div class="col-sm-6 col-md-6 col-lg-6 col-xl-6 simple-image-box"></div> 
    </div> 
    <div class="row"> 
     <div class="col-sm-6 col-md-6 col-lg-6 col-xl-6 simple-image-box"></div> 
     <div class="col-sm-6 col-md-6 col-lg-6 col-xl-6 simple-image-box"></div> 
    </div> 
</div>

источник

2016-06-05 23:14:46

Разделители столбцов Bootstrap охватывают всю ширину контейнера вместо ширины столбца

ответ

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