Question

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

我需要在页面左侧找到一个大段落，在右侧找到4个小段落。这是应有的样子的照片：http://joxi.ru/823avEMIJDNJDr

提前谢谢！

这是我的代码：

<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％的块。您需要将它们嵌套，而不是将所有块都放在同一级别。

<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列。

引导网格系统（行澄清）

1 个答案: