Question

为什么内容嵌套在每个列表项中？内容应该都在同一行。我已尝试floating并更改了position，但没有任何效果。我该如何解决这个问题？

.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

你需要清除浮子。您可以将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>

Answer 2

为您的.icon-left div提供彩色背景（例如background: gold），它应该变得明显。底部填充延伸超过右侧的非浮动元素，这将推动下一行。

减少.icon-left上的填充（例如缩小到padding: 12px 25px 24px 15px;）应该允许所有内容重新排成一行。

稍微不相关的提示：将类fa-fw添加到您的FA图标以使用固定宽度图标，这将使您的文本完美排列。

Answer 3

你有额外的填充图标 - 左

尝试填充：12px 25px 25px 15px;

此外，我将使用div和网格类col-lg-3包装每个部分，这样您就不必使用这个大填充，并且可以更好地控制UI。

为什么这个Bootstrap列会起作用？

3 个答案: