混合自然寬和引導寬度列

所以我有一個自舉3形式，我只是想排隊一堆跨度在一排整齊的，分解成一個堆棧移動：混合自然寬和引導寬度列

From [station1] to [station2] at [time] 

From 
[station1] 
to 
[station2] 
at 
[time]

顯然我能做到這一點，它的工作原理：

<div class="row"> 
    <div class="col-md-1">From</div> 
    <div class="col-md-3"><select>...</select></div> 
    <div class="col-md-1">To</div> 
    <div class="col-md-3"><select>...</select></div> 
    ... 
    </div>

然而，這看起來很愚蠢，如果屏幕寬：

From  [station1]  to  [station2]  at  [time]

如果I q在沒有col-X-Y類的情況下需要一些跨度，但它們不適合Bootstrap。如果我嘗試將網格和非網格跨度或div混合在一起，它們將以奇怪和神祕的方式排列，如this JSFiddle的最後兩行所示。幫幫我？

來源

2014-02-25 jpatokal

Bootstrap不是一切的解決方案。有時您仍然需要編寫自己的CSS。您可以通過使用適當的類來減少較大屏幕的列寬，但這不會改善很多。

相反，你最好寫自己的CSS。將您的元素設置爲inline-block，添加一些邊距和填充。如果你想更進一步，你可以編寫自己的媒體查詢來處理寬度減小的樣式。

請看Bootstrap中the variables file的第260行。

@screen-xs:     480px; 
@screen-xs-min:    @screen-xs; 
@screen-phone:    @screen-xs-min;

您可以使用這些變量來創建視口特定的CSS。

@media (max-width: $screen-xs) { 
    // Change spans to block 
    span.my-field { 
    display: block; 
    margin-bottom: 10px; 
    } 
}

如果你不使用薩斯或更少，你可以硬編碼變量的值。例如，480px而不是$screen-xs。

來源

2014-02-25 11:53:53 Mohamad

你可以包裝在一個較小的寬度欄的列，如col-sm-5或col-sm-6 ..

<div class="row"> 
    <div class="col-sm-4"> 
    <div class="col-lg-2">From</div> 
    <div class="col-lg-2"><select><option>station</option></select></div> 
    <div class="col-lg-2">To</div> 
    <div class="col-lg-2"><select><option>station</option></select></div> 
    <div class="col-lg-2">at</div> 
    <div class="col-lg-2"><select><option>time</option></select></div> 
    </div> 
</div>

演示：http://www.bootply.com/116599

來源

2014-02-25 14:38:16 ZimSystem

這仍然看起來，因爲差距比他們應該更大。我不認爲爲這種類型的事情使用Bootstrap列是一個好主意。 – Mohamad

看起來可以忍受，雖然如果你「文本右」對齊文本div，所以他們旁邊的選擇。（爲什麼你們兩個互相低估？） – jpatokal

我不知道我爲什麼被低估。 @ Mohamad的解決方案非常困難，因爲它需要一個定製的Bootstrap版本。爲什麼當這個Bootstrap解決方案是開箱即用的--Bootstrap甚至在他們的文檔中有嵌套列的示例：http://getbootstrap.com/css/#grid-nesting – ZimSystem

的另一種方法：

<span>From</span> 
<br class="visible-xs visible-sm"/> 
<span>...</span> 
<br class="visible-xs visible-sm"/>

看起來討厭，但似乎很好。我還沒有發現任何問題。

來源

2015-01-09 11:28:52 althaus

混合自然寬和引導寬度列

回答

相關問題