Javascript 引导网格系统（行）

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

我需要在页面左侧找到1个大段落，在右侧找到4个小段落。 下面是一张照片，它应该是：

我的结果是：

提前谢谢你

这是我的密码：

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

你知道我们能为你提供什么吗？



知识是一种美德，是一种美德，是一种美德，是一种美德。但是，在最低限度上，我们需要一个实验室来进行日常工作。两人或两人在一个无教区的房间里互相指责。除偶尔因疏忽而死亡外，不得因疏忽而导致动物死亡。



联系我们
管理层
知识是一种美德，是一种美德，是一种美德，是一种美德。但是，在最低限度上，我们需要一个实验室来进行日常工作

用户界面/用户体验设计
知识是一种美德，是一种美德，是一种美德，是一种美德。但是，在最低限度上，我们需要一个实验室来进行日常工作

标志/品牌
知识是一种美德，是一种美德，是一种美德，是一种美德。但是，在最低限度上，我们需要一个实验室来进行日常工作

动画
知识是一种美德，是一种美德，是一种美德，是一种美德。但是，在最低限度上，我们需要一个实验室来进行日常工作

您对行和列的想法是错误的

您需要的是首先将空间拆分为两个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列

您对行和列的想法是错误的

您需要的是首先将空间拆分为两个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列

使用外部链接和图像会影响问题的寿命和有用性，尝试创建一个没有外部链接和图像的问题：）使用外部链接和图像会影响问题的寿命和有用性，尝试创建一个没有外部链接和图像的问题：）