列放置问题中的Bootstrap列

Question

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

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

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

现状图：

我想要实现的目标：

＆＃13;

＆＃13;

.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; 
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 1

你的左右DIV包裹了Bootstrap col-md-6列，因此它们不再相互浮动。此外，始终将嵌套的col-*放在另一个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>