防止流體柱在iPhone屏幕上突破新線

我正在處理我的第一個Bootstrap項目，並且有點卡住了。在頁面頂部，我需要左側的徽標和右側的2個按鈕堆疊在一起。這是我到目前爲止有：防止流體柱在iPhone屏幕上突破新線

<div class="container-fluid"> 
    <div class="row-fluid"> 
    <div class="span4"> 
     <img src="/img/logo.png" width="120" /> 
    </div> 
    <div class="span8"> 
     <a class="btn btn-large" href="#" style="width:100%;"><i class="icon-map-marker"></i> Find Location</a><br /> 
     <a class="btn btn-large" href="#" style="width:100%;"><i class="icon-comment"></i> Call Now</a>  
    </div> 
    </div> 
</div>

它可以在桌面上的預期，但我在iPhone中，span8分欄符，並在下一行出現。有什麼方法可以覆蓋這個？

來源

2012-04-24 Yev

這是響應式網格的預期行爲，當您調整屏幕大小時，您可以在引導文檔頁面（特別是在scaffolding演示中）看到相同的效果。您可以通過創建自己的課程來解決此問題，以便將span標籤包含在您想要在移動設備上並排保存的標籤中，並且我們可以將其封裝到媒體查詢中，以便在具有屏幕的移動設備上觸發大小爲480px或更低（又名iPhone），這樣它就不會影響桌面響應式網格，直到達到該限制。

CSS

@media all and (max-width: 480px) { 
    .half { 
     float: left !important; 
     width: 50% !important; 
    } 
}

Demo，試試你的移動設備，http://jsfiddle.net/r5VCy/1/show/上查看此演示。

來源

2012-04-24 23:10:09

第一個例子鏈接不工作了，儘管它應該是一樣的... – 2013-04-17 10:26:00

@hugoderhungrige哪一個？測試了這些鏈接，他們對我來說都是...... – 2013-04-17 23:56:48

......它（突破到一條新線）似乎發生在一個特定的寬度，當這兩個元素都有比容器更高的寬度，並且媒體樣式被觸發之前，但在480px及以下的作品，所以我的壞... – 2013-04-18 00:37:25

在引導程序3中，有一組用於腳手架的CSS類，它們包含的功能允許您在較小的屏幕上禁用堆棧。

新的CSS命名法使用「列」而不是「跨度」，它們有很多種。「col-xs-」品種（超小型）使您可以設置即使在額外小型設備上也不堆疊的網格。

來源

2013-11-19 20:22:55 Oxfordian3

這應該是公認的答案，直到Bootstrap 4成爲正式版本。 – blackhawk 2016-06-07 16:42:57

只是想添加到關於Bootstrap 3的註釋中。我對包裝太早的列有相同的問題，並沒有保持它們的寬度足夠長（每個'starter模板'示例中的「col-lg-6」）。更改爲「COL-SM-6」的伎倆 - 爲每個尺寸的參考是在這裏：

http://getbootstrap.com/css/#responsive-utilities

來源

2013-12-12 00:02:57 martenc

這是正確的方法，因爲需要添加col和col-sizes，如引用的col-lg-6與col-sm-6或其他任何數字一樣。 – 2014-02-19 18:05:28

這太好了。但是如果你想讓列絕對不能堆疊，你需要使用'xs'，而不是'sm'。 – 2016-02-16 10:42:35

謝謝，這也幫助我解決了另一個問題，那就是在屏幕尺寸縮小的情況下，列切換。 – lfender6445 2017-01-15 01:58:50

防止流體柱在iPhone屏幕上突破新線

回答

相關問題