html - Bootstrap 容器 div

Question

大家好，使用 Bootstrap 并努力了解如何让我的主 div 框在其中包含其他 div

例如我正在尝试做这个:

这个大盒子只是一个div。

到目前为止我得到了什么:

<div class="container">
    <div class="MainBox">
      <div class="Leftbox">
        <h3>Box</h3>
        <div class="btn-group-vertical">
            <button type="button" class="btn btn-primary btn-responsive">P</button>
            <button type="button" class="btn btn-success btn-responsive">B</button>
            <button type="button" class="btn btn-success btn-responsive">L</button>
            <button type="button" class="btn btn-success btn-responsive">R</button>
            <button type="button" class="btn btn-success btn-responsive">T</button>
            <button type="button" class="btn btn-success btn-responsive">F</button>
        </div>
    </div>

    <div class="CentreBox">     
    </div>      
    </div>
</div>

我不太确定如何处理右侧的框，我尝试了不同的方法，但它弄乱了整个 div。任何帮助都会很棒。谢谢xx

Answer 1

正如@Sringland 在他的评论中所建议的那样，您真的很想研究 Bootstraps 网格系统，可在此处找到:Bootstrap Docs

网格系统在任何屏幕尺寸(从超小到大)上创建 12 列，并且可以通过 col-(screensize)-(span) 定义为一个类。例如 - 如果您想要 12 列横跨大屏幕，请将类:col-lg-12 添加到您的 div。

这些列是“可嵌入的”，并且会在彼此之间创建一个新的 12 列布局。因此，如果您想将一个 8 列布局拆分为两个大小相等的容器，它会像这样:

<div class="col-md-8">
  <div class="col-md-6"> </div>
  <div class="col-md-6"> </div>
</div>

因此请记住，每次您“打开”一列，无论其大小如何，该容器都会有另外 12 列可供使用。

说完所有这些之后，您的布局将如下所示:

<div class="row height-500px">
  <div class="container">
    <div class="col-md-3 border height-500px">
      <!-- Content goes here -->
    </div>
    <div class="col-md-7 border height-500px">
      <!-- CONTENT GOES HERE -->
    </div>

    <div class="col-md-2 height-500px">
      <div class="col-md-12 height-125px border">
        <!-- Content goes here -->
      </div>
      <div class="col-md-12 height-125px border">
        <!-- Content goes here -->
      </div>
      <div class="col-md-12 height-125px border">
        <!-- Content goes here -->
      </div>
      <div class="col-md-12 height-125px border">
        <!-- Content goes here -->
      </div>
    </div>
  </div>
</div>

这里是一个链接 Bootply看到它在行动。 请参阅 bootply 以更好地理解高度类和边界类。我创建这些只是为了代表您的布局。

现在，装订线(列之间的空间)没有按预期工作，我希望有人能提供帮助。但是，希望这对您来说是一个很好的起点。