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

Jus尝试使用bootstrap网格系统。我使用右栏的按钮，但你可以使用你需要的任何东西。

<div class="container MainBox border-on">
      <div class="col-md-2 left border-on">
        <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="col-md-8 CentreBox border-on"> 
    <h3>
    center    
    </h3>
    </div>
    <div class="col-md-2 right border-on">
        <h3>
            right
        </h3>  
        <div class="col-md-12">
            One
        </div>
        <div class="col-md-12">
            Two
        </div>
        <div class="col-md-12">
            Three
        </div>
        <div class="col-md-12">
            Four
        </div>
    </div>      
</div>

Answer 2

你真的想看看Bootstraps网格系统，正如@Sringland在他的评论中所建议的那样：Bootstrap Docs

网格系统在任何屏幕尺寸上创建12列（来自xtra small - large），并且可以通过col-（屏幕尺寸） - （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以更好地了解高度等级和边界类。我创建这些只是为了表示你的布局。

现在，排水沟（列之间的空间）没有按预期工作，我希望有人帮助那里。但是，希望这对你来说是一个很好的起点。

Bootstrap容器div

2 个答案: