Отзывчивый Контейнер не между собой, когда слишком маленький - PullRequest
Новая
       15

Отзывчивый Контейнер не между собой, когда слишком маленький

0 голосов
/ 24 мая 2019

У меня есть три столбца с текстом и цветом фона.Когда окно становится меньше, эти три цвета становятся слишком тонкими, но я хочу, чтобы они размещались между собой.Как мне сделать это адаптивным?

Я пытался поместить три столбца в класс строки, но затем цвет фона расширялся 

<div class="col-xs-4">
   <div class="textbox">
      <p> Text </p>
   </div>
</div>
<div class="col-xs-4">
   <div class="textbox">
      <p> Text</p>
   </div>
</div>
<div class="col-xs-4">
   <div class="textbox">
      <p>Text</p>
   </div>
</div>

.textbox {
    min-height: 490px;
    background: #F6F6F6;
    padding: 0 28px;
    word-break: break-word;
}

Я ожидал, что три текстовых поля будут размещеныдруг с другом, когда они становятся слишком маленькими

1 Ответ

1 голос
/ 24 мая 2019

Я не совсем понимаю, для чего вы здесь, но похоже, что вы хотите, чтобы ваши столбцы складывались, когда браузер становится меньше.В этом случае, так как вы используете Bootstrap, я бы рекомендовал использовать классы flexbox, например: 

<div class="d-flex flex-wrap">
  <div class="textbox">
    <p> Text </p>
  </div>
  <div class="textbox">
    <p> Text</p>
  </div>
  <div class="textbox">
    <p>Text</p>
  </div>
</div>

Вот документация Bootstrap для flexbox .

Кроме того, это отличное руководство по использованию нативных свойств CSS flexbox .

Надеюсь, это поможет!

...