Bootstrap中的窄列

我有一個2列的網格（實際上，某些行在其他5列網格中有2列）。我試圖讓第一個儘可能窄，並將其餘的長度給另一個。嵌套不起作用，因爲我只有2列。Bootstrap中的窄列

基本上，我想是這樣col-xs-0.5或者更好的解決方案，這將使第一列剛好足夠寬以適應*

下面是一個例子：https://jsfiddle.net/4jcL24ze/8/

<div class="container"> 
    <div class="row"> 
     <div class="col-xs-1">*</div> 
     <div class="col-xs-11">some long description</div> 
    </div> 
</div>

來源

2015-10-24 IttayD

您是否可以不添加自己的CSS，將列的寬度設置爲col-xs-1的一半或更少？ –

我可以，但想知道Bootstrap中是否有解決方案（否則，我可以爲整個事情創建自己的CSS），具體來說，它可以在他們的類系統縮放時很好地縮放 – IttayD

窄列

您可以使用自定義類來進行佈局。由於.col-xs-0.5是col-xs-1的一半，因此您可以使用8.33/2 = 4.166%並類似地從col-xs-11.5中減去寬度。但是，這僅用於縮小列，並且如果您需要將星號與文本說明進行匹配，則不需要。

配件*與描述

我不知道爲什麼你需要單獨*新的一列時，你可以把它的col-xs-12這樣裏面的文字：JSfiddle

.col-xs-05, .col-xs-115 { 
 
    float: left; 
 
    min-height: 1px; 
 
    padding-left: 15px; 
 
    padding-right: 15px; 
 
    position: relative; 
 
} 
 
.col-xs-05 { 
 
    width: 4.166%; 
 
} 
 
.col-xs-115 { 
 
    width: 95.33%; 
 
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/> 
 
<div class="container"> 
 
    <div class="row"> 
 
     <div class="col-xs-05">*</div> 
 
     <div class="col-xs-115">some long description</div> 
 
    </div> 
 
</div>

JSfiddle Demo

來源

2015-10-24 05:08:12

我一直在尋找解決方案引導。很顯然，我可以創建自己的風格。但也許這是唯一的解決方案 – IttayD

是的，Bootstrap中沒有開箱即用的解決方案。嵌套列仍將佔用父容器的寬度。 –

有沒有一種方法可以說：完全適合內容，將剩下的內容留給其他列？也許它需要在網格之外（但是我如何確保它們保持在同一條線上）？ – IttayD

Bootstrap中的窄列

回答

相關問題