Не помещаются два блока в строку bootstrap?

Question

[Alide]

Вот сайт gta5rp-info.ru

Сделал четыре блока col-md-3, по сути должно вмещаться 4 блока в строку, но четвертый блок почему-то съезжает на вторую строку - как пофиксить? При этом если подключаю boostrap 3, а не 4, то там нет такой проблемы. Но использовать bootstrap 3 не вариант.

Answer 1

[When you dont want to litter on stackoverflow]

<div class="container-fluid">
  <div class="row">
    <div class="col-md" style="display:inline-block;">
  <div style="background:#fff; height:500px;">
  </div>
    </div>
    <div class="col-md" style="display:inline-block;">
  <div style="background:#fff; height:500px;">
  </div>
    </div>
    <div class="col-md" style="display:inline-block;">
  <div style="background:#fff; height:500px;">
  </div>
    </div>
    <div class="col-md" style="display:inline-block;">
  <div style="background:#fff; height:500px;">
  </div>
    </div>
  </div>
</div>

Comments

[Alide]

Нет, не решается проблема

[When you dont want to litter on stackoverflow]

Alide, Ты задал это блоку col-md-3?

[When you dont want to litter on stackoverflow]

Alide, И почему ты используешь для врапера col-md-12 а не container?

[Alide]

Andriy Kosmenyuk, https://imgur.com/gX8lCp1

[When you dont want to litter on stackoverflow]

Alide, Вот такая структура должна быть

<div class="container">
  <div class="row">
    <div class="col-sm">
      One of four columns
    </div>
    <div class="col-sm">
      One of four columns
    </div>
    <div class="col-sm">
      One of four columns
    </div>
    <div class="col-sm">
      One of four columns
    </div>
  </div>
</div>

[Alide]

Andriy Kosmenyuk, тогда половину пространства просто уходит куда-то ,а мне надо на всю ширину страницы

[Alide]

Andriy Kosmenyuk, https://imgur.com/HssF3Eh

[When you dont want to litter on stackoverflow]

Alide, Я сейчас

[When you dont want to litter on stackoverflow]

Alide,

<div class="container-fluid">
  <div class="row">
    <div class="col-md" style="display:inline-block;">
	<div style="background:#fff; height:500px;">
	</div>
    </div>
    <div class="col-md" style="display:inline-block;">
	<div style="background:#fff; height:500px;">
	</div>
    </div>
    <div class="col-md" style="display:inline-block;">
	<div style="background:#fff; height:500px;">
	</div>
    </div>
    <div class="col-md" style="display:inline-block;">
	<div style="background:#fff; height:500px;">
	</div>
    </div>
  </div>
</div>

[When you dont want to litter on stackoverflow]

Alide, У меня всё норм теперь, если будешь padding добавлять - то с border-box.

Answer 2

[Степан Крапивин]

В бутстрапе колонки оборачиваются в блоки .container > .row

<div class="container">
  <div class="row">
     <!-- здесь твои колонки должны быть -->
  </div>
</div>

а у тебя дичь какая-то:

<div class="col-md-12">
  <div class="col-md-3" style="display:inline-block;"></div>
  <div class="col-md-3" style="display:inline-block;"></div>
  <div class="col-md-3" style="display:inline-block;"></div>
  <div class="col-md-3" style="display:inline-block;"></div>
</div>

ещё и инлайн стили левые display:inline-block;

Comments

[Alide]

https://imgur.com/HssF3Eh почему container половину пространства пустым оставляет и сужает так сильно?

[Степан Крапивин]

Alide, вот документация бутстрапа4 по колонкам.

там написано:

Используйте класс .container для фиксированной ширины
или .container-fluid для 100%-ной ширины.

[Alide]

Степан Крапивин, Спасибо огромное вам за помощь