Question

我想在大型显示器上定义一个看起来像这样的布局：

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

＆＃34; A＆＃34;应该是固定的宽度，而＆＃34; B＆＃34;和＆＃34; C＆＃34;应该动态扩展以完全覆盖剩余的可用宽度（即不应该最大化并在大型显示器上留下空白边缘 - 我认为这是流畅的布局）。

现在，在将屏幕宽度减小到特定量以下时，我希望将这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>

这在全宽度上看起来很好，但是当减小宽度时，它也开始收缩＆＃34; A＆＃34;在宽度，我不想要。

如果我向＆＃34; A＆＃34;添加固定宽度，它会折叠B＆amp;降低宽度时，A在A下太早 - 我希望B＆amp; 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无用，margin-left .aside更好

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内的不同行上，它就可以了。我添加了背景颜色来强调块。

＆＃13;

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

＆＃13;

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

＆＃13;

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

Bootstrap混合网格布局

3 个答案:

与@Christina