Изучаю boostrap 4 Как разобраться новичку?

Question

[Иван Иванов]

Изучаю boostrap 4. Не могу разобраться в такой штуке. Имею следующий код

<div class="container-fluid">
	<div class="row">
		  <div class="col-xs-2 text-center">.col-xs-2</div>
		  <div class="col-xs-8 text-center">.col-xs-8</div>
		  <div class="col-xs-2 text-center">.col-xs-2</div>
		  
		  <div class="col-md-4 text-center">.col-md-4</div>
		  <div class="col-md-2 text-center">.col-md-2</div>
		  <div class="col-md-2 text-center">.col-md-2</div>
		  <div class="col-md-4 text-center">.col-md-4</div>
	</div>
</div>

Не могу понять. Как сделать так, чтобы на маленьких разрешениях отображался контент состоящий из 3 ячеек xs, а на средних разрешения 4 ячейки md. Раньше верстал без Boostrapa. Просто делал два блока и в зависимости от разрешения экрана задавал display none. И всегда стили задавал от большего разрешения к меньшему. У бустрапа я как понимаю, все делается от меньшего к большему разрешению. Так же буду признателен за ссылку на шпаргалку по бустрапу.

Answer 1

[Владислав Нагорный]

Изучать тут

Answer 2

[Дима Долготер]

https://www.youtube.com/watch?v=2JMMnNOhDoc&t=28s

Answer 3

[Дмитрий Дарт]

Примерно так:

<div class="row">
      <div class="col-xs-3 col-md-4 text-center">раз</div>
      <div class="col-xs-3 col-md-4 text-center">раз</div>
      <div class="col-xs-3 col-md-4 text-center">раз</div>
      <div class="col-xs-3 col-md-4 text-center">раз</div>
  </div>

Подробнее:
html-plus.in.ua/bootstrap-4-grid-variants
Как сделать в cеткe на Bootstrap одну колонку на SM разрешение и в две колонки на XS?

Comments

[Иван Иванов]

Да но тогда у нас получается 4 ячейки и на маленьких разрешениях и на больших. А мне надо что бы на маленьких было 3 ячейки а на больших 4.

[Дмитрий Дарт]

Иван Иванов, а, извиняюсь, тогда везде наоборот col-xs-4 col-md-3

[Иван Иванов]

Дмитрий Дарт, Угу. Но тогда 4 ячейка на маленьких разрешениях переносится на новую строку. А нужно что бы она вообще исчезла.

[Дмитрий Дарт]

Иван Иванов, а понял, тогда делатее отдельные блоки, внутрь них помещаете DIVы вот так https://codepen.io/ColleenEMc/pen/gPRoNN

[Иван Иванов]

Дмитрий Дарт, Странно почему-то не срабатывает =/ Хотя в примере работает

[Дмитрий Дарт]

MaxKorz, спасибо, давно я не верстал ))

[Иван Иванов]

MaxKorz, странно вы говорите что нет col-xs но поведение элементов разное в зависимости от того пишу я col-xs-3 или col-3

<div class="row">
      <div class="col-3 col-md-4 text-center">раз</div>
      <div class="col-3 col-md-4 text-center">раз</div>
      <div class="col-3 col-md-4 text-center">раз</div>
      <div class="col-3 col-md-4 text-center">раз</div>
  </div>
<div class="row">
      <div class="col-xs-3 col-md-4 text-center">раз</div>
      <div class="col-xs-3 col-md-4 text-center">раз</div>
      <div class="col-xs-3 col-md-4 text-center">раз</div>
      <div class="col-xs-3 col-md-4 text-center">раз</div>
  </div>

[Иван Иванов]

MaxKorz, Спасибо, понял. Я еще натупил, поставил бустрап 3 вместо 4. Уже переподключил всё. А подскажите, пожалуйста. Как менять содержимое блока, в зависимости от разрешения. Ну например. У меня на разрешениях md и выше, идёт строка из 3 ячеек. центральная имеет размер md-8 остальные автоматические. Внутри находится логотип размером 580px. На маленьких разрешениях центральня ячейка должна быть md-4 и внутри неё уже должен быть логотип размером 280px. Как быть в такой ситуации?

[Иван Иванов]

MaxKorz, Спасибо вы меня прямо выручили для было прямо открытием

[Иван Иванов]

MaxKorz, Я прошу прощения, если беспокою вас глупыми вопросами. Подскажите пожалуйста, а как сделать определённую высоту у row? Просто самому написать высоту руками и подставить id? например так?

<div class="row" id="row-1">....</div>

#row-1{ height: 200px; };

Или есть какие-то специальный классы в boostrap для этого?

[Иван Иванов]

MaxKorz, Спасибо огромное еще раз. У вас очень хорошо получается объяснять =)

Answer 4

[Vyach Gor]

https://webformyself.com/bootstrap-4-obychnaya-set...