Bootstrap混合網格布局

Question

我想在大型顯示器上定義一個看起來像這樣的布局：

.----------------------------.
|       |        B           |
|  A    |____________________|
|       |                    |
|       |                    |
|       |                    |
|       |        C           |
|       |                    |
|_______|____________________|

“A”應該是固定的寬度，而“B”和“C”應該動態擴展以完全覆蓋剩余的可用寬度（即不應該最大化並在大型顯示器上留下空白邊緣 - 我認為這是流體布局）。

現在，在將屏幕寬度減小到特定量以下時，我希望這些3個塊按照A，B，C的順序重新排列在彼此之下，所有3個塊都利用全部可用寬度。

你能幫我解決這個問題嗎？ 到目前為止，我有以下設置：

<div class="container-fluid">
    <div class="col-md-2">A</div>
    <div class="col-md-10">B</div>
    <div class="col-md-10">C</div>
</div>

這在全寬度上看起來很好，但是當減小寬度時，它開始收縮也是寬度“A”，這是我不想要的。

如果我給“A”增加一個固定的寬度，它會在減小寬度時過早地折疊A下的B＆C - 我希望B＆C動態減小，不像A - 我認為指定一個寬度會使布局完全混亂。

這是一個JSBin 。

Answer 1

這是一些東西：

與@Christina合作

（看評論）

例如，固定200px ， min-width 600px ：

Bootply ： http ： //www.bootply.com/olRbQrHoWQ

HTML ：

<div class="aside">
A
</div>
<div class="main">
   <div class="col-xs-12">
     <div class="row">
        <div class="col-xs-12 b">B</div>  
       </div>
     <div class="row">
        <div class="col-xs-12 c">C</div>  
       </div>
     </div>
</div>

CSS ：

@media screen and (min-width: 600px){
   html, body{
      height:100%; 
   }
  .aside{
    height:100%;
    width:200px;
    float:left;
  }
  .main{   
      z-index: -1;
      position:absolute;
      background:cyan;
      width:100%;
      padding-left: 200px;
      float:left;
      height:100%;
    }

}

---

更新 ： position:absolute不是有用的，而.aside上的margin-left更好

Bootply ： http ： //www.bootply.com/7Y9t8B1oAY

CSS ：

@media screen and (min-width: 600px) { 
    html,
    body {
        height: 100%
    }
    .aside {
        height: 100%;
        width: 200px;
        float: left;
        margin-right: -200px;
    }
    .main {
        background: cyan;
        width: 100%;
        padding-left: 200px;
        float: left;
        height: 100%;
        position: relative;
        z-index: -1;
    }
}

Answer 2

您的Bootstrap代碼稍有錯誤，因為您缺少row類。 但是如果將B和C嵌套在col-md-10內的不同行上，它就可以工作。 我添加了背景顏色來強調塊。

 .A { background-color: red; } .B { background-color: blue; } .C { background-color: green; } 

 <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css"> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap-theme.min.css"> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script> <div class="container"> <div class="row"> <div class="col-md-2 A"> A </div> <div class="col-md-10"> <div class="row"> <div class="B">B</div> <div class="C">C</div> </div> </div> </div> </div> 

Answer 3

像這樣的東西？

HTML：

<div class="container-fluid">
    <div class="col-md-2">A</div>
    <div class="col-md-10">
        <div class="col-md-10-sub">B</div>
        <div class="col-md-10-sub">C</div>
    </div>
</div>

CSS

.container-fluid {
    width: 80%;
    height: 80%;
    position: absolute;
    top: 5%;
    left: 5%;
}
.col-md-2 {
    position:absolute;
    top:0;
    left:0;
    width: 100px;
    height: 200px;
}
.col-md-10 {
    position:absolute;
    top:0px;
    left:100px;
    width: auto;
    height: 200px;
}
.col-md-10-sub {
    position:relative;
    left:0px;
    height: auto;
}

DEMO