引導程序列無法正常工作

Question

引導程序行和列在電話和其他小型設備上無法正確顯示。

截圖在移動設備

。

對於平板電腦和更大的顯示器，此功能正常工作。

代碼

<div class="col-xs-5 col-sm-1"><i class="fa fa-mobile" aria-hidden="true"></i></div> 
    <div class="col-xs-7 col-sm-3">ww</div> 
    <div class="col-xs-5 col-sm-1"><i class="fa fa-envelope-o" aria-hidden="true"></i></div> 
    <div class="col-xs-7 col-sm-3">ww</div> 
    <div class="col-xs-5 col-sm-1"><i class="fa fa-map-marker" aria-hidden="true"></i></div> 
    <div class="col-xs-7 col-sm-3">ww</div> 

我做了一個臨時的解決辦法 - 我設置這些div相同的高度。但我不認爲這將永遠是好的解決方案。

臨時修復後（下面PIC添加ALIGN）

如何解決這個問題更好的辦法？

Answer 1

該問題源於您的浮標未清理。這在Bootstrap佈局中很常見，因爲幾乎所有的元素都是浮動的，所以他們包含了一個幫助類來處理它。

<div class="clearfix"> 

您將其插入到在特定斷點處斷開新行的項之間。所以，就你的情況而言，在你的xs斷點的前兩個「ww」div之後。

要僅它會影響您的XS斷點，我們添加一個引導輔助類：

<div class="clearfix visible-xs"> 

這些輔助類的更多信息可以在引導文檔中找到：
Clearfix，Visibility Classes

全部示例：

i { 
 
    font-size: 30px !important; 
 
}

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css" rel="stylesheet" /> 
 
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" /> 
 

 

 
<div class="col-xs-5 col-sm-1"><i class="fa fa-mobile" aria-hidden="true"></i> 
 
</div> 
 
<div class="col-xs-7 col-sm-3">ww</div> 
 
<div class="clearfix visible-xs"></div> 
 

 
<div class="col-xs-5 col-sm-1"><i class="fa fa-envelope-o" aria-hidden="true"></i> 
 
</div> 
 
<div class="col-xs-7 col-sm-3">ww</div> 
 
<div class="clearfix visible-xs"></div> 
 

 
<div class="col-xs-5 col-sm-1"><i class="fa fa-map-marker" aria-hidden="true"></i> 
 
</div> 
 
<div class="col-xs-7 col-sm-3">ww</div>

Answer 2

爲了獲得bootstrap的正確好處，您應該將12個網格列的每一列都包含在row div中。例如，

<div class="row"> 
    <div class="col-xs-5 col-sm-5"><i class="fa fa-map-marker" aria-hidden="true"></i></div> 
    <div class="col-xs-7 col-sm-7">ww</div> 
</div> 

Answer 3

您需要將這些列組中的每一列組成12列列。您的cols需要爲每個添加類的斷點添加最多12行。如果你不把它們連成一排，它們會在12列後自動換行 - 但是你需要確保你想要在同一行上的列總是加起來12個。

ie。

<div class="row> 
    <div class="col-xs-7 col-sm-9">ww</div> 
    <div class="col-xs-5 col-sm-3"><i class="fa fa-mobile" aria-hidden="true"></i></div> 
</div> 
<div class="row> 
    <div class="col-xs-7 col-sm-9">ww</div> 
    <div class="col-xs-5 col-sm-3"><i class="fa fa-envelope-o" aria-hidden="true"></i></div> 
</div> 
<div class="row> 
    <div class="col-xs-7 col-sm-3">ww</div> 
    <div class="col-xs-5 col-sm-9"><i class="fa fa-map-marker" aria-hidden="true"></i></div> 
</div> 

這也適用於少一點控制佈局（但您需要定義所有斷點 - 不只是小類和XS在您的類）。

<div class="row> 
    <div class="col-xs-7 col-sm-9 col-md-9 col-lg-9">ww</div> 
    <div class="col-xs-5 col-sm-3 col-md-3 col-lg-3"><i class="fa fa-mobile" aria-hidden="true"></i></div> 

    <div class="col-xs-7 col-sm-9 col-md-9 col-lg-9">ww</div> 
    <div class="col-xs-5 col-sm-3 col-md-3 col-lg-3"><i class="fa fa-envelope-o" aria-hidden="true"></i></div> 

    <div class="col-xs-7 col-sm-9 col-md-9 col-lg-9">ww</div> 
    <div class="col-xs-5 col-sm-3 col-md-3 col-lg-3"><i class="fa fa-map-marker" aria-hidden="true"></i></div> 
</div>