Bootstrap 3.0 - Fluid Grid ที่มีขนาดคอลัมน์คงที่

ฉันกำลังเรียนรู้วิธีใช้ Bootstrap ตอนนี้ฉันกำลังลุยเลย์เอาต์อยู่ แม้ว่า Bootstrap จะดูดี แต่ทุกอย่างที่ฉันเห็นก็ดูล้าสมัย สำหรับชีวิตของฉันฉันมีสิ่งที่ฉันคิดว่าเป็นเค้าโครงพื้นฐานที่ฉันคิดไม่ออก เค้าโครงของฉันมีลักษณะดังต่อไปนี้:

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

เส้นตารางนี้ต้องใช้ความสูงเต็มของหน้าต่าง จากความเข้าใจของฉันฉันต้องผสมความกว้างคงที่และของไหล อย่างไรก็ตาม Bootstrap 3.0 ดูเหมือนจะไม่มีคลาสของเหลวอีกต่อไป แม้ว่าจะเป็นเช่นนั้น แต่ฉันก็ไม่สามารถหาวิธีผสมของไหลกับขนาดคอลัมน์คงที่ได้ ไม่มีใครรู้วิธีทำใน Bootstrap 3.0?

ไม่มีวิธีง่ายๆในการผสมของไหลและความกว้างคงที่กับ Bootstrap 3 ซึ่งหมายความว่าจะเป็นเช่นนี้เนื่องจากระบบกริดได้รับการออกแบบให้เป็นสิ่งที่ลื่นไหลและตอบสนองได้ดี คุณสามารถลองแฮ็กอะไรบางอย่างได้ แต่มันจะขัดกับสิ่งที่ระบบ Responsive Grid กำลังพยายามทำซึ่งมีจุดประสงค์เพื่อให้เลย์เอาต์นั้นไหลผ่านอุปกรณ์ประเภทต่างๆ

หากคุณต้องการยึดติดกับเลย์เอาต์นี้ฉันจะพิจารณาจัดวางเพจของคุณด้วย CSS ที่กำหนดเองและไม่ใช้กริด

แก้ไข:เนื่องจากผู้คนจำนวนมากดูเหมือนจะต้องการทำสิ่งนี้ฉันได้เขียนคำแนะนำสั้น ๆ พร้อมกรณีการใช้งานทั่วไปที่นี่https://www.atlascode.com/bootstrap-fixed-width-sidebars/ 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;
}

หรือใช้คุณสมบัติการแสดงผลกับเซลล์ตาราง

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/

ฉันมีปัญหาที่แตกต่างกันเล็กน้อย:

• ฉันต้องการรวมคอลัมน์คงที่และแบบไหลเป็นส่วนหนึ่งของตารางแทนที่จะเป็นส่วนหนึ่งของเลย์เอาต์แบบเต็มหน้าต่าง
• ฉันต้องแก้ไขคอลัมน์ทั้งทางซ้ายและขวา
• ฉันไม่กังวลเกี่ยวกับพื้นหลังคอลัมน์ที่ใช้ความสูงเต็มของแถวที่มี

เป็นผลให้ฉันหันไป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>

อัปเดต 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);
  }
}

Working Bootstrap Fixed-Fluid Demo

Bootstrap 4จะมี flexbox ดังนั้นรูปแบบเช่นนี้จะง่ายขึ้นมาก: http://www.codeply.com/go/eAYKvDkiGw

ตกลงคำตอบของฉันดีมาก:

<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

อัปเดต 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>

SCSS

.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;
  }
}

โดยไม่ต้องแก้ไขโค้ดเลย์เอาต์ bootstrap มากเกินไป

อัปเดต (ไม่ใช่จาก 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>

ทำไมไม่ตั้งค่าสองคอลัมน์ทางซ้ายเป็นค่าคงที่ด้วย 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>