css - 为什么这个 Bootstrap 列会出现问题？

Question

为什么内容会嵌套在每个列表项中？内容应该全部在同一行。我尝试过 float 并更改位置，但没有任何效果。我该如何解决这个问题？

.icon-left{
    float:left;
    padding: 12px 25px 60px 15px;
    color:#4ECABE;
}
.text{
    text-align:left;
    padding:0 0 0 15px;
}
.text h4{
    padding-bottom:5px;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<link href="http://netdna.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet"/>
<div class="col-xs-12 col-sm-6 col-md-6 col-lg-6">
            <div class="icon-left">
              <i class="fa fa-ticket fa-3x"></i>
            </div>
            <div class="text">
                <h4>Get Free Books</h4>
               <p>Increase your chances to win by doing simple tasks - like watching videos :) </p>
            </div> <br>
            <div class="icon-left" id='smile'>
              <i class="fa fa-smile-o fa-3x"></i>
            </div>
            <div class="text2">
            <h4>New Books Every 6 Hours</h4>
               <p>That's right, you only have 6 hours to get entries for a book.</p>
            </div> <br>
            <div class="icon-left">
              <i class="fa fa-truck fa-3x"></i>
            </div>
            <div class="text">
            <h4>Absolutely free!</h4>
               <p>We even pay shipping.</p>
            </div>
        </div>

Answer 1

您需要清除 float 。您可以应用 br {clear: Both; } 使用现有的标记，或者使用 bootstrap 实现此目的的更好方法是将 .icon-left 和 .text 元素包装在一个元素中，并使用.clearfix 类。

.icon-left{
    float:left;
    padding: 12px 25px 60px 15px;
    color:#4ECABE;
}
.text{
    text-align:left;
    padding:0 0 0 15px;
}
.text h4{
    padding-bottom:5px;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />
<link href="http://netdna.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet" />
<div class="col-xs-12 col-sm-6 col-md-6 col-lg-6">
  <div class="clearfix">
    <div class="icon-left">
      <i class="fa fa-ticket fa-3x"></i>
    </div>
    <div class="text">
      <h4>Get Free Books</h4>
      <p>Increase your chances to win by doing simple tasks - like watching videos :) </p>
    </div>
  </div>
  <div class="clearfix">
    <div class="icon-left" id='smile'>
      <i class="fa fa-smile-o fa-3x"></i>
    </div>
    <div class="text2">
      <h4>New Books Every 6 Hours</h4>
      <p>That's right, you only have 6 hours to get entries for a book.</p>
    </div>
  </div>
  <div class="clearfix">
    <div class="icon-left">
      <i class="fa fa-truck fa-3x"></i>
    </div>
    <div class="text">
      <h4>Absolutely free!</h4>
      <p>We even pay shipping.</p>
    </div>
  </div>
</div>