Ширина статического столбца Bootstrap

Это скорее вопрос передовой практики, чем что-либо еще. Итак, скажем, у меня есть два столбца в Bootstrap, и я хочу, чтобы правый столбец был установлен на 300 пикселей, пока он не достигнет точки останова 768 пикселей, а затем сложил его.

<div class="container">
  
  <div class="row">
    
    <!-- This column needs to fill the rest of the container fluidly -->
    <div class="col-sm-8"></div>
    
    <!-- This column needs to stay 300px -->
    <div class="col-sm-4"></div>
    
  </div>
  
</div>

Мое первоначальное решение заключалось в том, чтобы просто добавить классы в каждый контейнер и статически установить ширину обоих контейнеров для каждой точки останова мультимедиа, а затем установить для ширины значение auto для точки останова стека. Однако мне не нравится это решение, потому что оно чрезвычайно многословно и кажется слишком хрупким, чтобы устанавливать оба столбца как статические. Я бы предпочел, чтобы в левом столбце использовалось динамическое смешивание ИЛИ задавалось процентное значение.

Есть предположения? Спасибо!


css twitter-bootstrap twitter-bootstrap-3 responsiveness
person Philip Theobald    schedule 10.11.2015    source источник
comment
Не устанавливайте их как столбцы, если вам нужно, чтобы они были фиксированной ширины!   -  person Jay    schedule 10.11.2015
comment
Решает ли вашу проблему добавление style="width:300px;" ко второму <div>?   -  person Tim Lewis    schedule 10.11.2015
comment
Я видел много других решений этой проблемы, проблема в том, что ни одно из них не учитывает необходимость складывать столбцы. Сохраняя их как файлы начальной загрузки, я избавляюсь от необходимости записывать все в медиа-запросах, что касается функциональности стекирования.   -  person Philip Theobald    schedule 10.11.2015
comment
@PhilipTheobald, надеюсь, мой ответ поможет с этим - хотя он подразумевает отказ от Bootstrap для этой конкретной части!   -  person gdgr    schedule 10.11.2015

Ответы (2)


arrow_upward
4
arrow_downward

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

Представляем дисплей: гибкий

Модуль Flexbox Layout (Flexible Box) (в настоящее время - рабочий проект W3C Last Call) направлен на обеспечение более эффективного способа компоновки, выравнивания и распределения пространства между элементами в контейнере, даже если их размер неизвестен и / или является динамическим (таким образом слово «флекс»).

Я написал ручку, демонстрирующую мое представление о том, как с этим справиться, которую вы можете увидеть здесь .

Давайте сначала посмотрим на код, новый HTML:

<div class="flex-container">
  <div class="left-content content">

  </div>
  <div class="right-content content">

  </div>
</div>

У нас есть структура, аналогичная той, с которой вы уже имеете дело, только мы немного изменили формат (я использовал имена классов, которые должны помочь проиллюстрировать, что происходит.)

А вот сопутствующий CSS:

.flex-container {
  display: flex;
  flex-flow: row;
}

.content {
  min-height: 500px;
}

.left-content {
  background-color: rgba(0,0,0,0.2);
  flex: 1 1 auto;
}

.right-content {
  width: 300px;
  background-color: rgba(0,0,0,0.4);
}

@media (max-width: 768px) {
  .flex-container {
    flex-flow:column;
  }
  .right-content {
    width: 100%;
  }
}

Итак, изначально мы хотим использовать свойство flex-flow: row, чтобы наши элементы отображались бок о бок (это означает, что контейнер по существу выстраивает своих дочерних элементов в строку). Мы устанавливаем фиксированную ширину 300px в правом столбце, а затем используем свойство flex: 1 1 auto; в левой части, которое более подробно выглядит так ...

Это сокращение для сочетания гибкости-роста, гибкости-усадки и гибкости. Второй и третий параметры (flex-shrink и flex-base) не являются обязательными. По умолчанию 0 1 авто.

Указанное выше свойство указывает элементу заполнить оставшееся пространство контейнера.

Сложение в зависимости от размера области просмотра

Вы можете видеть, что я использовал базовый медиа-запрос с max-width: 768px, когда область просмотра меньше этого, мы просто складываем области содержимого, устанавливая flex-flow: column для родительского контейнера и width: 100% для его дочерних элементов, что указывает браузеру рассматривать контейнер как столбец и, таким образом, складывать его элементы друг на друга.

Если что-то неясно, дайте мне знать, и я улучшу свой ответ.

person gdgr    schedule 10.11.2015
comment
Хотя я не возражаю, что гибкость решит эту проблему ... Я застрял в использовании начальной загрузки, поскольку вся остальная часть платформы полагается на нее. Есть какие-нибудь предложения, которые позволят сохранить Bootstrap в уравнении? - person Philip Theobald; 10.11.2015
comment
Вы можете сохранить Bootstrap в уравнении и использовать его для всего остального, что вам нужно, но просто используйте этот метод для этого конкретного требования. Если бы вы писали это на LESS (я полагаю), вы также могли бы унаследовать переменные Bootstrap / медиа-запросы. Этот метод определенно может работать в столбцах Bootstrap и т. Д. - person gdgr; 10.11.2015
comment
Кроме того, в Bootstrap нет ничего (насколько мне известно, и я пролистал источник МЕНЬШЕ изрядно), что могло бы обрабатывать заполнение неизвестного объема пространства. Есть только два других варианта, о которых я могу думать: таблицы или пользовательский JS. - person gdgr; 10.11.2015

arrow_upward
-1
arrow_downward

Вам следует избегать использования встроенных столбцов начальной загрузки для этой задачи.

Вы можете (и должны!) Определять свои собственные правила размера носителя для своих классов, используя @media, если они не соответствуют поведению начальной загрузки по умолчанию. Например, @media (min-width: 768px) { .my-class: { width: 300px; } }. Вы можете прочитать @media на странице Mozilla Dev.

person tredzko    schedule 10.11.2015