Вопрос по twitter-bootstrap-3, twitter-bootstrap – Bootstrap 3.0 - Fluid Grid с фиксированными размерами столбцов

121

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

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

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

Вот пример с фиксированной жидкостью для Bootstrap 3:codeply.com/go/GN4QinVrjI Zim
Изучите использование таблиц рядом со строками и столбцами. kalu

Ваш Ответ

8   ответов
30

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

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

Пожалуйста, измените свой ответ, чтобы включить ссылку на эту ссылку с решением. С уважением:stackoverflow.com/questions/8740779/... Ariel Altamirano
Вот почему я люблю flexcss-tricks.com/snippets/css/a-guide-to-flexbox ahnbizcad
флексбокс рамки. Давайте сделаем это ahnbizcad
Я полагаю, что такого рода вещам придется подождать, пока Flexbox получит полную поддержку, но это все еще очень неубедительно. Модель Bootstrap хороша, когда число столбцов статично, но, например, если вы можете динамически скрывать и показывать столбцы, поддержка хотя бы одного изменяемого столбца начинает приобретать гораздо больший смысл. Nate Bundy
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>

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

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

0

Решение, представленное ниже, слишком старое, я рекомендую использовать метод компоновки 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>

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

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

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

редактировать: Поскольку многие люди хотят это сделать, я написал краткое руководство с более общим примером использования здесь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;
}
Да,jsfiddle.net/4z5ooL1y Dean North
Это хорошо, но если вы поместите в фиксированный столбец, например, этот <p> <a class="btn btn-default" href="#" role="button"> Просмотреть подробности & raquo; </a> </ p> или Bootstrap, тогда они не работают в фиксированном столбце. Есть ли какое-то решение для этого? Vaclav Elias
position: fixed означает, что при прокрутке содержимое этого столбца плавает над остальной частью страницы. В моем случае я исправил это, используяposition: absolute. this.lau_
Попробуй этоjsfiddle.net/u9gjjebj Dean North
@VaclavElias попробуйте поместить в него полноразмерный diff с позицией: относительный, а затем раскрывающийся список? Это помогает, если вы делаете jsfiddle, чтобы показать проблему w00t
-4

ениями в вашем собственном 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>
В Bootstrap только столбцы могут быть непосредственными потомками строк. Sai Dubbaka
Мммммм, нет ... не думаю, что это работает ... Ariel Altamirano
25

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/

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

Обновлено 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

Похожие вопросы