這個Bootstrap列爲什麼會起作用？

爲什麼內容嵌套在每個列表項內？內容應該全部在同一行上。我試過floating並更改了position，但沒有任何工作。我該如何解決？這個Bootstrap列爲什麼會起作用？

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

來源

2017-03-13 user6902601

您需要清除浮動。您可以與您現有的標記，或者有更好的方式與引導做應用br { clear: both; }是包裹.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>

來源

2017-03-13 22:35:50

給你.icon-left div的彩色背景（例如background: gold），它應該變得明顯。底部填充物延伸超過右側的非浮動元素，這將推動下一行。

減少填充.icon-left（例如padding: 12px 25px 24px 15px;）應該允許所有內容重新排列成一行。

略無關提示：類fa-fw添加到您的FA圖標使用固定寬度的圖標，這將使你的文本完美排隊。

來源

2017-03-13 22:33:28 gwcodes

你有微胖圖標左

嘗試填充：12px的25px的25px的15px的;

另外我想換一個DIV每一個部分和網格類COL-LG-3所以你不必使用這種大的填充，並且會給你在你的UI更好的控制。

來源

2017-03-13 22:39:13 Sleiman

這個Bootstrap列爲什麼會起作用？

回答

相關問題