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

126

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

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

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

Узел Новичок
источник
Попробуйте использовать таблицы вместе со строками и столбцами.
калу
Вот пример фиксированной гибкости
Зим

Ответы:

32

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

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

Стив К.
источник
5
Я предполагаю, что подобным вещам придется подождать, пока Flexbox получит полную поддержку, но это все еще действительно отстой. Модель Bootstrap хороша, когда количество столбцов статично, но, например, если вы можете динамически скрывать и отображать столбцы, поддержка, по крайней мере, одного столбца, чтобы быть гибким, начинает иметь гораздо больший смысл.
Nate Bundy
1
Пожалуйста, отредактируйте свой ответ, включив ссылку на эту ссылку с решением. С уважением: stackoverflow.com/questions/8740779/…
Морти
151

edit: Поскольку многие люди, похоже, хотят это сделать, я написал краткое руководство с более общим вариантом использования здесь 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;
}
Дин Норт
источник
Это хорошо, но если вы поместите в фиксированный столбец, например, этот <p> <a class="btn btn-default" href="#" role="button"> Просмотреть подробности & raquo; </a> </p> или раскрывающийся список Bootstrap, то они не работают в фиксированном столбце. Есть ли что-нибудь исправить?
Вацлав Элиас
@VaclavElias попробуйте поместить в него полноразмерную разницу с положением: относительная, а затем раскрывающимся списком? Будет полезно, если вы создадите jsfiddle, чтобы показать проблему
w00t 06
Я еще не видел, как это работает во всех браузерах, но в остальном, хорошая работа, молодец.
Фил Купер,
Есть ли способ сделать это с помощью фиксированных столбцов с правой стороны?
Шон
3
position: fixedозначает, что при прокрутке содержимое этого столбца плавает над остальной частью страницы. В моем случае я исправил это с помощью position: absolute.
Laurent
26

или используйте свойство отображения с таблицей-ячейкой;

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/

Frankey
источник
1
проблема , когда вы используете отл. `.visible-xs , becouse display: table-cell` стать display:block...
Дариуш Филипьяк
21

У меня была немного другая проблема:

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

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

<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>
Пэдди Манн
источник
4
@Schemetrical У меня не было вопросов. Я объяснил, что у меня немного другая проблема, и добавил решение, к которому пришел, чтобы помочь другим людям, которые пришли сюда из Google.
Пэдди Манн
1
ваш ответ бесценен. Довольно просто, но решает мою проблему. Большое спасибо.
Чарльз
Почему вы не можете присвоить строке div те поля, которые есть у содержащего div в вашем ответе?
GreenAsJade
Этот ответ вполне законен. Если вам нужно использовать столбцы начальной загрузки, но вы не хотите, чтобы они сворачивались при определенной ширине экрана, это то, что вам нужно (например, используйте pull-left / pull-right вместо col-md-3).
Сэм
Это кажется отличным ответом. У меня проблемы с моим marginи paddingв моем ряду посередине, но это должна быть решаемая проблема. Каковы непредвиденные последствия такого подхода?
Vishal
15

Обновлено 2018

ИМО, лучший способ подойти к этому в 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);
  }
}

Working Bootstrap Fixed-Fluid Demo

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

Zim
источник
3

Хорошо, мой ответ очень хороший:

<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>

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

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

Дариуш Филипьяк
источник
1

ОБНОВЛЕНИЕ 2014-11-14: приведенное ниже решение слишком старое, я рекомендую использовать метод компоновки гибкого блока. Вот обзор: 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): добавление фрагмента кода ниже, чтобы облегчить понимание этого ответа. Но похоже, что это не работает так, как ожидалось.

jfxiao
источник
-1 Мне этот ответ не имеет никакого смысла. Столбцы не суммируются до 12. Столбцы имени и клавиатуры перекрываются. Не понимаю, откуда у него +2 голоса.
Мариано Десанце
-3

Почему бы просто не установить для двух левых столбцов фиксированное значение в вашем собственном 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>
mikeschuld
источник
В Bootstrap только столбцы могут быть непосредственными дочерними элементами строк.
Сай Дуббака