使用引导容器进行布局

Question

我正在尝试创建一个可以正确调整大小的布局，而不管窗口大小、分辨率等如何。这是我正在尝试做的事情：

    html, body {
       border: 0px;
       margin: 0px;
       padding: 0px;
       height:100%;
    }
    .container{
       height:100%;
       display:table;
       width: 80%; 
    }
   .row{    
      display: table-row;
   }
   @media (min-width: 992px) {
      .row .no-float {
         display: table-cell;
         float: none;
      }
   }
   .col-md-9 {
       background: #A28DFF;
       height:100%;    
    }
    .navbar {
       margin-bottom: 0;
    }

    </style>

<div class="container">
    <div class ="row " style="border:0px solid red;">
        <div class=" no-float" style="border:0px solid green; height:1px;">
            <!-- code for my nav bar -->
        </div>        
    </div>
    <div class="row">        
        <div class="col-md-9 no-float" style="padding-top:50px">
            <!-- code for my content -->
        </div>
    </div>
</div>

但问题是它没有正确调整大小。如果页面变得太小，工具栏行和内容行会分开，不会相互调整大小，也不会保持在一起。任何人都可以提供有关如何使此布局响应调整大小的提示吗？

这是一个 jsFiddle：https://jsfiddle.net/4qj7a3bh/13/

Answer 1

所以我们得出结论，您对引导程序不是很有经验，所以我为您编写了这段代码。这是如何使用引导程序的示例，您还应该探索他们的网格系统，以便更好地理解代码。此外，除非绝对必要，否则您真的应该避免直接定位引导类。

<div class="container mainC">
  <div id="toolbar" class="row text-center col-md-10 col-md-offset-1">
    <h2>Toolbar section</h2>
  </div>
  <div id="content" class="row text-center col-md-10 col-md-offset-1">
    <h2>Content section</h2>
  </div>
</div>

#toolbar {
  background: cyan;
}

#content {
  background: yellow;
}

这里是 codepen，因此您可以查看实际代码： https://codepen.io/anon/pen/vWaKxZ