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