Min-width для столбца в сетчатой системе Bootstrap

У меня есть следующий HTML-код с Bootstrap CSS.

<div class="row">
  <div class="col-sm-4" style="min-width: 66px;">Name</div>
  <div class="col-sm-1" style="min-width: 120px;">Instance name</div>
  <div class="col-sm-7" style="min-width: 87px;">Due date</div>
</div>

Без 'min-width' ширина второго столбца в некоторых случаях меньше 120px, а имя экземпляра не полностью отображается. Таким образом, я добавил, что "min-width" и ширина строки становятся более 100% в этих случаях. Последний столбец завернут в новую строку.

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

Ответ 1

Не уверен, есть ли такой способ выполнить то, что вы хотите.

col-sm-x определяет определенный процент ширины вашего окна просмотра, и если вы предоставите пользовательские значения, то суммарная ширина всех столбцов будет больше или меньше 100%, что не является желаемым поведением.

Вместо этого вы можете предоставить несколько классов для одного и того же div. Пример:

<div class="row">
  <div class="col-sm-4 col-xs-1">Name</div>
  <div class="col-sm-1 col-xs-3">Instance name</div>
  <div class="col-sm-7 col-xs-2">Due date</div>
</div>

Если этого решения недостаточно, вы, скорее всего, найдете какое-то решение javascript, которое вручную устанавливает ширину других элементов div.

Кажется, есть другой, похожий вопрос, ранее размещенный здесь на stackoverflow. Посмотрите здесь.

Bootstrap Grid в W3Schools

Ответ 2

Столбцы начальной загрузки являются гибкими элементами. Вы должны выбрать один столбец, который должен сжиматься, когда другие достигли минимальной ширины.

Для вашего примера я выбрал последний, "Срок исполнения", который обычно должен быть column-sm-7. Я присваиваю ему нефиксированный размер столбца "col", который заполнит (flex-grow) доступное пространство. В этом примере по умолчанию будет 7 столбцов. 12 columns - 4 columns - 1 column = 7 columns

Что еще более важно, он начнет уменьшаться, когда другие столбцы достигнут минимальной ширины.

<div class="row">
  <div class="col-sm-4" style="min-width: 66px;">Name</div>
  <div class="col-sm-1" style="min-width: 120px;">Instance name</div>
  <div class="col" style="min-width: 87px;">Due date</div>
</div>

вот кодекс, который я сделал: https://codepen.io/timar/pen/VQWmQq/

также возможно вручную переопределить flex-свойства столбца начальной загрузки, например: gving the column 'col-sm-1' и style="flex-grow: 1; max-width:100%;"

Ответ 3

Вы пытались изменить свои значения для меньших разрешений? Например

  <div class="col-lg-4 col-sm-4">Name</div>
  <div class="col-lg-1 col-sm-2">Instance name</div>
  <div class="col-lg-7 col-sm-6">Due date</div>

У Bootstrap есть опции для разных размеров экрана, поэтому вы можете проверить их: http://getbootstrap.com/css/