Question

我在按照自己喜欢的方式在引导程序中对齐列时遇到了一些麻烦。这就是我要寻找的：

我一直在为此而愚弄，而且我已经能够让A和B对齐好了，但是E通常在页面上太过分了。 C，D和F都完全对齐，但我在嵌套B＆amp; B时遇到了麻烦。 E正确。 B与A对齐，E与C / D对齐，F将在页面左侧E下方的页面上呈现。

Answer 1

使用bootstrap div类在您的应用程序中尝试此代码：

<body>
<div class="container-fluid">
  <div class="row">
    <div class="col-sm-8" style="background-color:lavender;">
      <div class="row">
         <div class="col-sm-12" style="background-color:lavenderblush;height:100px">A</div>
      </div>
      <div class="row">
         <div class="col-sm-6" style="background-color:green;height:50px">C</div>
         <div class="col-sm-6" style="background-color:yellow;height:50px">D</div>
      </div>
      <div class="row">
         <div class="col-sm-12" style="background-color:black;height:50px">F</div>
      </div>
   </div>
   <div class="col-sm-4" style="background-color:lavenderblush;">
     <div class="row">
         <div class="col-sm-12" style="background-color:blue;height:50px">B</div>
     </div>
     <div class="row">
        <div class="col-sm-12" style="background-color:pink;height:150px">E</div>
     </div>
   </div>
</div>
</div>
</body>

但首先，您必须在应用程序中使用 bootstrap.min.css，bootstrap.min.js，jquery.min.js 文件。

Answer 2

参见示例fiddle

HTML

<div class="col-xs-12">
<div class="row">
<div class="col-xs-9">
<div class="row">
<div class="col-xs-12 box a">
A
</div>
</div>
<div class="row">
<div class="col-xs-6 box">
C
</div>
<div class="col-xs-6 box">
D
</div>
</div>
<div class="row">
<div class="col-xs-12 box">
F
</div>
</div>
</div>
<div class="col-xs-3">
<div class="row">
<div class="col-xs-12 box">
B
</div>
<div class="col-xs-12 box e">
E
</div>
</div>
</div>
</div>
</div>

使用bootstrap的嵌套逻辑时出现问题？

2 个答案: