Bootstrap 3.0 - Fluid Grid с фиксированными размерами столбцов

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

---------------------------------------------------------------------------
|       |       |                                                         |
|       |       |                                                         |
| 240px | 160px | All Remaining Width of the Window                       |
|       |       |                                                         |
|       |       |                                                         |
--------------------------------------------------------------------------|

Эта сетка должна занимать всю высоту окна. Из моего понимания мне нужно смешивать фиксированную и жидкую ширину. Однако Bootstrap 3.0, похоже, больше не имеет класса жидкости. Даже если бы это было так, я не могу понять, как смешивать жидкости и фиксированные размеры колонок. Кто-нибудь знает, как это сделать в Bootstrap 3.0?

 Zim20 мая 2016 г., 13:24
Вот пример с фиксированной жидкостью для Bootstrap 3:codeply.com/go/GN4QinVrjI
 kalu12 авг. 2014 г., 06:08
Изучите использование таблиц рядом со строками и столбцами.

Ответы на вопрос(8)

Решение Вопроса

ванную ширину с Bootstrap 3. Это должно быть так, поскольку система сетки разработана, чтобы быть гибкой, отзывчивой вещью. Вы могли бы попытаться что-то взломать, но это пошло бы вразрез с тем, что пытается сделать система Responsive Grid, цель которой состоит в том, чтобы макет проходил по разным типам устройств.

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

 Ariel Altamirano29 мая 2014 г., 22:07
Пожалуйста, измените свой ответ, чтобы включить ссылку на эту ссылку с решением. С уважением:stackoverflow.com/questions/8740779/...
 ahnbizcad21 окт. 2014 г., 15:16
Вот почему я люблю flexcss-tricks.com/snippets/css/a-guide-to-flexbox
 ahnbizcad21 окт. 2014 г., 15:17
флексбокс рамки. Давайте сделаем это
 Nate Bundy19 нояб. 2013 г., 23:41
Я полагаю, что такого рода вещам придется подождать, пока Flexbox получит полную поддержку, но это все еще очень неубедительно. Модель Bootstrap хороша, когда число столбцов статично, но, например, если вы можете динамически скрывать и показывать столбцы, поддержка хотя бы одного изменяемого столбца начинает приобретать гораздо больший смысл.

ОК, мой ответ очень приятный:

<style>
    #wrapper {
        display:flex;    
        width:100%;
        align-content: streach;
        justify-content: space-between;
    }    

    #wrapper div {
        height:100px;
    }

    .static240 {
        flex: 0 0 240px;
    }
    .static160 {
        flex: 0 0 160px;
    }

    .growMax {
        flex-grow: 1;
    }

</style>

<div id="wrapper">
  <div class="static240" style="background:red;" > </div>
  <div class="static160"  style="background: green;" > </div> 
  <div class="growMax"  style="background:yellow;"  ></div>
</div>

детская площадка

если вы хотите поддерживать все браузеры, используйтеhttps://github.com/10up/flexibility

Решение, представленное ниже, слишком старое, я рекомендую использовать метод компоновки flex box. Вот обзор:http://learnlayout.com/flexbox.html

Мое решение

HTML

<li class="grid-list-header row-cw row-cw-msg-list ...">
  <div class="col-md-1 col-cw col-cw-name">
  <div class="col-md-1 col-cw col-cw-keyword">
  <div class="col-md-1 col-cw col-cw-reply">
  <div class="col-md-1 col-cw col-cw-action">
</li>

<li class="grid-list-item row-cw row-cw-msg-list ...">
  <div class="col-md-1 col-cw col-cw-name">
  <div class="col-md-1 col-cw col-cw-keyword">
  <div class="col-md-1 col-cw col-cw-reply">
  <div class="col-md-1 col-cw col-cw-action">
</li>

СКС
.row-cw {
  position: relative;
}

.col-cw {
  position: absolute;
  top: 0;
}


.ir-msg-list {

  $col-reply-width: 140px;
  $col-action-width: 130px;

  .row-cw-msg-list {
    padding-right: $col-reply-width + $col-action-width;
  }

  .col-cw-name {
    width: 50%;
  }

  .col-cw-keyword {
    width: 50%;
  }

  .col-cw-reply {
    width: $col-reply-width;
    right: $col-action-width;
  }

  .col-cw-action {
    width: $col-action-width;
    right: 0;
  }
}

Без изменения слишком много кода макета начальной загрузки.

Обновление (не из OP): добавив фрагмент кода ниже, чтобы облегчить понимание этого ответа. Но это не похоже на работу, как ожидалось.

ul {
  list-style: none;
}
.row-cw {
  position: relative;
  height: 20px;
}
.col-cw {
  position: absolute;
  top: 0;
  background-color: rgba(150, 150, 150, .5);
}
.row-cw-msg-list {
  padding-right: 270px;
}
.col-cw-name {
  width: 50%;
  background-color: rgba(150, 0, 0, .5);
}
.col-cw-keyword {
  width: 50%;
  background-color: rgba(0, 150, 0, .5);
}
.col-cw-reply {
  width: 140px;
  right: 130px;
  background-color: rgba(0, 0, 150, .5);
}
.col-cw-action {
  width: 130px;
  right: 0;
  background-color: rgba(150, 150, 0, .5);
}
<ul class="ir-msg-list">
  <li class="grid-list-header row-cw row-cw-msg-list">
    <div class="col-md-1 col-cw col-cw-name">name</div>
    <div class="col-md-1 col-cw col-cw-keyword">keyword</div>
    <div class="col-md-1 col-cw col-cw-reply">reply</div>
    <div class="col-md-1 col-cw col-cw-action">action</div>
  </li>

  <li class="grid-list-item row-cw row-cw-msg-list">
    <div class="col-md-1 col-cw col-cw-name">name</div>
    <div class="col-md-1 col-cw col-cw-keyword">keyword</div>
    <div class="col-md-1 col-cw col-cw-reply">reply</div>
    <div class="col-md-1 col-cw col-cw-action">action</div>
  </li>
</ul>

 Mariano Desanze13 нояб. 2014 г., 22:58
-1 Этот ответ не имеет никакого смысла для меня. Столбцы не суммируют до 12. Имя и столбцы клавиатуры перекрываются. Я не понимаю, как у него +2 голоса.

Мне нужно было объединить фиксированные и текучие столбцы как часть таблицы, а не как часть полноэкранного макетаМне нужно, чтобы столбцы были зафиксированы как слева, так и справаМеня не беспокоили фоновые столбцы, использующие полную высоту вмещающей строки

В результате я прибег кfloat для левого и правого столбцов, а затем может использовать Bootstrap'srow сделать колонки жидкости между ними.

<div>
    <div class="pull-left" style="width:240px">Fixed 240px</div>
    <div class="pull-right" style="width:120px">Fixed 120px</div>
    <div style="margin-left:240px;margin-right:120px">
        <div class="row" style="margin:0px">
            Standard grid system content here
        </div>
    </div>
</div>
 charlesrockbass28 окт. 2015 г., 17:57
Ваш ответ неоценим. Довольно просто, но решаю мою проблему. Большое спасибо.
 Paddy Mann28 мая 2015 г., 11:31
@ У меня не было вопросов. Я объяснил, что у меня немного другая проблема, и добавил решение, к которому я пришел, чтобы помочь другим людям, которые приходят сюда из Google.
 GreenAsJade19 мар. 2016 г., 08:43
Почему вы не можете дать строке div поля, которые есть в вашем ответе?
 Sam03 нояб. 2016 г., 07:42
Этот ответ вполне законен. Если вам нужно использовать загрузочные столбцы, но вы не хотите, чтобы они сворачивались при определенной ширине экрана, это то, что вам нужно (например, используйте pull-left / pull-right вместо col-md-3).
 Vishal12 мая 2018 г., 07:16
Это похоже на отличный ответ. У меня проблемы с моимmargin а такжеpadding в моем ряду в середине, но это должно быть решаемой проблемой. Каковы непреднамеренные последствия такого подхода?

редактировать: Поскольку многие люди хотят это сделать, я написал краткое руководство с более общим примером использования здесьhttps://www.atlascode.com/bootstrap-fixed-width-sidebars/, Надеюсь, это поможет.

Система сетки bootstrap3 поддерживает вложение строк, что позволяет настроить корневой ряд, чтобы разрешить боковые меню фиксированной ширины.

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

Вот как я обычно это делаюhttp://jsfiddle.net/u9gjjebj/

HTML

<div class="container">
    <div class="row">
        <div class="col-fixed-240">Fixed 240px</div>
        <div class="col-fixed-160">Fixed 160px</div>
        <div class="col-md-12 col-offset-400">
            <div class="row">
            Standard grid system content here
            </div>
        </div>
    </div>
</div>

CSS

.col-fixed-240{
    width:240px;
    background:red;
    position:fixed;
    height:100%;
    z-index:1;
}

.col-fixed-160{
    margin-left:240px;
    width:160px;
    background:blue;
    position:fixed;
    height:100%;
    z-index:1;
}

.col-offset-400{
    padding-left:415px;
    z-index:0;
}
 Dean North20 мая 2015 г., 12:48
 Vaclav Elias02 янв. 2015 г., 15:30
Это хорошо, но если вы поместите в фиксированный столбец, например, этот <p> <a class="btn btn-default" href="#" role="button"> Просмотреть подробности & raquo; </a> </ p> или Bootstrap, тогда они не работают в фиксированном столбце. Есть ли какое-то решение для этого?
 this.lau_07 сент. 2016 г., 17:12
position: fixed означает, что при прокрутке содержимое этого столбца плавает над остальной частью страницы. В моем случае я исправил это, используяposition: absolute.
 Dean North12 июн. 2015 г., 10:01
Попробуй этоjsfiddle.net/u9gjjebj
 w00t06 мар. 2015 г., 09:59
@VaclavElias попробуйте поместить в него полноразмерный diff с позицией: относительный, а затем раскрывающийся список? Это помогает, если вы делаете jsfiddle, чтобы показать проблему

ениями в вашем собственном css, а затем создать новую сетку с полными 12 столбцами для остального содержимого?

<div class="row">
    <div class="fixed-1">Left 1</div>
    <div class="fixed-2">Left 2</div>
    <div class="row">
        <div class="col-md-1"></div>
        <div class="col-md-11"></div>
    </div>
</div>
 Sai Dubbaka21 мар. 2015 г., 21:10
В Bootstrap только столбцы могут быть непосредственными потомками строк.
 Ariel Altamirano29 мая 2014 г., 22:02
Мммммм, нет ... не думаю, что это работает ...

CSS

.table-layout {
    display:table;
    width:100%;
}
.table-layout .table-cell {
    display:table-cell;
    border:solid 1px #ccc;
}

.fixed-width-200 {
    width:200px;
}

HTML

<div class="table-layout">
    <div class="table-cell fixed-width-200">
        <p>fixed width div</p>
    </div>
    <div class="table-cell">
        <p>fluid width div</p>    
    </div>
</div>

http://jsfiddle.net/DnGDz/

 Dariusz Filipiak31 мая 2016 г., 15:51
проблема это когда вы используете экс. `.visible-xs, becouseдисплей: table-cell` сталdisplay:block ...

Обновлено 2018

IMO, лучший способ достичь этого в Bootstrap 3 - использовать медиазапросы, которые совпадают с точками останова Bootstrap, так что вы используете столбцы фиксированной ширины только для больших экранов, а затем позволяете компоновке быстро реагировать на меньшие экраны. Таким образом, вы сохраняете отзывчивость ...

@media (min-width:768px) {
  #sidebar {
      width: inherit;
      min-width: 240px;
      max-width: 240px;
      min-height: 100%;
      position:relative;
  }
  #sidebar2 {
      min-width: 160px;
      max-width: 160px;
      min-height: 100%;
      position:relative;
  }
  #main {
      width:calc(100% - 400px);
  }
}

Рабочая БутстрапФиксированная-жидкость демонстрация

Bootstrap 4 У will есть flexbox, поэтому такие макеты будут намного проще:http://www.codeply.com/go/eAYKvDkiGw

Ваш ответ на вопрос