嵌套Bootstrap列用于列表与图像？

Question

我一直在尝试重新创建一个类似下面的列表（复选框和x只是png图像），但我似乎无法弄明白。

我尝试使用两个发短信的cols，但我不能在我的生活中弄清楚如何获得对齐和文本分解正确。

非常感谢任何帮助。

现在，我的代码看起来像这样：

<div class="row">
        <div class="col-md-6 col-md-6-offset-2">
            <h4 style="text-align: center;">THEY LOVE</h4>
            <div class="row ">
                 <div class="col-xs-1">
                     <img src="http://d26mw3lpqa99qj.cloudfront.net/prod-fool/sell/yes-15d4ba569f9f4beb7d8cfd8adc8ed886.png">
                     </div>
                <div class="col-xs-11">
                     <p style="padding-top: 8px;">Stuff</p>
                     </div>
           </div>



            </div>

        <div class="col-md-6" style="text-align: center;"><h4>THEY DON'T LOVE</h4></div>

         <div class="row ">
                 <div class="col-xs-1">
                     <img src="http://d26mw3lpqa99qj.cloudfront.net/prod-fool/sell/yes-15d4ba569f9f4beb7d8cfd8adc8ed886.png">
                     </div>
                <div class="col-xs-10">
                     <p style="padding-top: 8px;">Stuff</p>
                     </div>
           </div>

    </div>

Answer 1

DEMO：http://jsbin.com/faboze/1/

http://jsbin.com/faboze/1/edit?html,css,output

仔细查看html和css，以便了解如何调整间距以及如何使用无序列表进行悬挂缩进。另请查看使用的网格类。

 <div class="container">
     <div class="row">
        <div class="col-sm-offset-2 col-sm-4">
           <h4 class="text-center">THEY LOVE</h4>
           <ul class="list-unstyled love">
              <li>Morbi in sem quis dui placerat ornare. Pellentesque odio nisi, euismod in, pharetra a, ultricies in, diam. Sed arcu. Cras consequat.</li>
              <li>Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus.</li>
              <li>Phasellus ultrices nulla quis nibh. Quisque a lectus. Donec consectetuer ligula vulputate sem tristique cursus. Nam nulla quam, gravida non, commodo a, sodales sit amet, nisi.</li>
              <li>Pellentesque fermentum dolor. Aliquam quam lectus, facilisis auctor, ultrices ut, elementum vulputate, nunc.</li>
           </ul>
        </div>
        <div class="col-sm-4">
           <h4 class="text-center">THEY DON’T LOVE</h4>
           <ul class="list-unstyled no-love">
              <li>Morbi in sem quis dui placerat ornare. Pellentesque odio nisi, euismod in, pharetra a, ultricies in, diam. Sed arcu. Cras consequat.</li>
              <li>Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus.</li>
              <li>Phasellus ultrices nulla quis nibh. Quisque a lectus. Donec consectetuer ligula vulputate sem tristique cursus. Nam nulla quam, gravida non, commodo a, sodales sit amet, nisi.</li>
              <li>Pellentesque fermentum dolor. Aliquam quam lectus, facilisis auctor, ultrices ut, elementum vulputate, nunc.</li>
           </ul>
        </div>
     </div>
  </div>

<强> CSS

.list-unstyled.love li, 
.list-unstyled.no-love li {
  background: url('http://d26mw3lpqa99qj.cloudfront.net/prod-fool/sell/yes-15d4ba569f9f4beb7d8cfd8adc8ed886.png') no-repeat;
  padding:0 0 5% 45px;
}

/* ======= change the no-love image ========== */
.list-unstyled.no-love li {
  background: url('http://d26mw3lpqa99qj.cloudfront.net/prod-fool/sell/yes-15d4ba569f9f4beb7d8cfd8adc8ed886.png') no-repeat;
}

Answer 2

你没有正确关闭你的标签。检查以下代码。
您可以使用bootstrap中的文本中心类来集中内容。

<link href="http://getbootstrap.com/dist/css/bootstrap.min.css" rel="stylesheet"/>
<div class="row text-center">
    <div class="col-md-6 col-md-6-offset-2">
        <h4>THEY LOVE</h4>
        <div class="row ">
             <div class="col-xs-1">
                 <img src="http://d26mw3lpqa99qj.cloudfront.net/prod-fool/sell/yes-15d4ba569f9f4beb7d8cfd8adc8ed886.png"/>
                 </div>
            <div class="col-xs-11">
                 <p style="padding-top: 8px;">Stuff</p>
                 </div>
       </div>
        </div>
    
    <div class="col-md-6"><h4>THEY DON'T LOVE</h4>

     <div class="row ">
             <div class="col-xs-1">
                 <img src="http://d26mw3lpqa99qj.cloudfront.net/prod-fool/sell/yes-15d4ba569f9f4beb7d8cfd8adc8ed886.png"/>
                 </div>
            <div class="col-xs-11">
                 <p style="padding-top: 8px;">Stuff</p>
                 </div>
       </div>

</div>