javascript - Bootstrap 网格系统(行澄清)

Question

我在使用 Bootstrap 网格系统定位页面上的对象时遇到了一个小问题。

我需要在页面左侧找到 1 个大段落，在右侧找到 4 个小段落。 这是一张应该如何的照片:http://joxi.ru/823avEMIJDNJDr

我的结果是:http://joxi.ru/4Ak7laDHyXPy8A

提前谢谢您!

这是我的代码:

<div class="container secondBlock">

    <div class="row align-items-center">
    <div class="col-md-6">

        <h1 align="left"><span style="font-weight: bold">DO YOU KNOW WHAT WE CAN PROVIDE TO YOU?</span></h1>
        <br>
        <p align="left">
            Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
        </p>
        <br>
        <button type="button" class="btn btn-danger pull-left" ><span stye=text-align: left>Contact Us</span></button>
</div> <!-- End of container (col-md-6) -->

    <div class="col-sm-3">
        <span class="glyphicon glyphicon-cog"></span>
        <h3>Management</h4>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
    </div>  

    <div class="col-sm-3">
        <span class="glyphicon glyphicon-pencil"></span>
        <h3>UI/UX Design</h4>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
    </div>

     <div class="row">
    <div class="col-sm-3">
        <span class="fa fa-diamond"></span>
        <h3>Logo/Branding</h4>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
    </div>  

    <div class="col-sm-3">
        <span class="fa fa-truck"></span>
        <h3>Animation</h4>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
    </div>  
</div>
<div>

</div> <!-- End of second big white container -->

Answer 1

您对行和列的思考方式是错误的......

您想要的是首先将空间分成 2 个大的 50% 列，然后将第二列分成占据该列 50% 的 block 。您需要嵌套它们，而不是仅仅将所有 block 放在同一级别。

<div class="row">
  <div class="col-md-6>Your big column content</div>
  <div class="col-md-6>
     <div class="row">
          <div class="col-md-6>Block 1</div>
          <div class="col-md-6>Block 1</div>
          <div class="col-md-6>Block 1</div>
          <div class="col-md-6>Block 1</div>
     </div>
   </div>
</div>

请注意，在第二个 col-md-6 中，有四个 col-md-6。尽管它们占据了全屏的 25%，但它们只占据了父行的 50%。您定义的每个列都可以再次分为 12 列。