列放置问题内的引导列

Question

我正在开发一个网站，该网站必须有一个描述部分。我试图通过有两个 Bootstrap 列来实现这一点，一个大小为 8，然后另一个大小为 4，以确保它等于 12。然后在 8 列中，我想在里面有两列，以实现一列左边的文本，然后右边的第二列文本。

这只是一个问题，因为它似乎不起作用，每当我尝试这样做时，它只会在 8 列内的第一列下方创建第二列。

我附上了一张图片，以便更容易看到我得到了什么以及我想要实现什么。非常感谢任何帮助。

当前情况图片：

我想要达到的目标：

.partLineDesc{
  margin-top: 30px;
  text-align: center;
}

.leftContDesc{
  margin-top: 20px;
  background-color:grey;
}

.rightContDesc{
  background-color:grey; 
  margin-top: 20px;
}

.cottonImg{
  margin-top: 15px;
  text-align: left;
}

.partLineDesc2{
  margin-top: 20px;
  text-align: center;
}

.securInfo{
  margin-top: 30px;
  text-align: center;
  background-color:#eff4f9;
  border-radius: 10px;
  border: 2px solid #dddddd;
  padding: 20px; 
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>

<div class="row">
  <div class="col-md-8">
    <div class="partLineDesc">
      <img src="partDesc.png" alt="line seperation" class="img-responsive" style="width:1000px; height:5px;">
    </div>

    <div class="leftContDesc">
      <div clas="col-md-6">
        <p>text text text text text text text text text text text text
        <br>text text text text text text text text text text text text
        </p>
        <img src="cottonImg.png" alt="100% Cotton" class="img-responsive" style="width:100px; height:100px;">
      </div>
    </div>

    <div class="rightContDesc">
      <div clas="col-md-6">
        <p>text text text text text text text text text text text text
        <br>text text text text text text text text text text text text
        </p>
      </div>
    </div>

    <div class="partLineDesc2">
      <img src="partDesc.png" alt="line seperation" class="img-responsive" style="width:1000px; height:5px;">
    </div>
  </div>

  <div class="col-md-4">
    <div class="securInfo">
    </div>
  </div>
</div>

Answer 1

您的左右 DIV 包装了 Bootstrap col-md-6 列，因此它们不再彼此相邻浮动。此外，始终将嵌套的 col-*s 放在另一个 row 中，这样填充是正确的..

<div class="container-fluid">
    <div class="row">
        <div class="col-md-8">
            <div class="partLineDesc">
                <img />
            </div>
            <div class="row">
                <div class="col-md-6">
                    <div class="leftContDesc">
                    <img />
                     </div>
                </div>
                <div class="col-md-6">
                    <div class="leftContDesc">
                    <p>

                    </p>
                    </div>
                </div>
            </div>
            <div class="partLineDesc2">
                <img/>
            </div>
        </div>
        <div class="col-md-4">
            <div class="securInfo">
            </div>
        </div>
    </div>
</div>

演示：http://codeply.com/go/yRQum3xKKY

Answer 2

您的引导列似乎到处都是。

您确实需要将尝试拆分为列的所有内容包装到开销div 中，这样您就说您的主容器占用了该网格的 12 列，然后您决定这 12 列中的哪一个列需要占用。

下面的快速模型。

---

    .partLineDesc{
        margin-top: 30px;
        text-align: center;
    }
    
    .leftContDesc{
        margin-top: 20px;
        background-color:grey;
    }
    
    .rightContDesc{
       background-color:grey; 
       margin-top: 20px;
    }
    
    .cottonImg{
        margin-top: 15px;
        text-align: left;
    }
    
    .partLineDesc2{
        margin-top: 20px;
        text-align: center;
    }
    
    .securInfo{
        margin-top: 30px;
        text-align: center;
        background-color:#eff4f9;
        border-radius: 10px;
        border: 2px solid #dddddd;
        padding: 20px; 
    }

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>

    <div class="row">
      <div class="col-sm-8">
        <div class="partLineDesc">
          <img src="partDesc.png" alt="line seperation" class="img-responsive" style="width:1000px; height:5px;">
        </div>
       </div>
    
        <div class="col-sm-12 col-md-12 col-lg-12">
        <div class="leftContDesc col-sm-4 col-md-4 col-lg-4">
            <p>
              text text text text text texttext text text text text text
              <br> text text text text text texttext text text text text text
            </p>
            <img src="cottonImg.png" alt="100% Cotton" class="img-responsive" style="width:100px; height:100px;">
        </div>
    
        <div class="rightContDesc col-sm-4 col-md-4 col-lg-4">
            <p>
              text text text text text texttext text text text text text
              <br> text text text text text texttext text text text text text
            </p>
        </div>
          
       <div class="col-sm-4 col-md-4 col-lg-4">
        <div class="securInfo">
        </div>
      </div>
          
    </div>
        <div class="partLineDesc2">
          <img src="partDesc.png" alt="line seperation" class="img-responsive" style="width:1000px; height:5px;">
        </div>
      </div>