Bootstrap 中的窄列

Question

我有一个 2 列网格（实际上，有些行在其他 5 列网格中有 2 列）。我试图使第一个尽可能窄，并将其余的长度留给另一个。嵌套不起作用，因为我只有 2 列。

基本上，我想要类似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>

Answer 1

窄柱

您可以为您的布局使用自定义类。由于.col-xs-0.5是 的一半col-xs-1，您可以使用8.33/2 = 4.166%并类似地从 col-xs-11.5 中减去宽度。但这只是为了缩小列的范围，如果您需要将星号与文本描述相匹配，则不需要。

*与描述相符

我不知道为什么当你可以将它放在这样的*文本中时需要分隔到一个新列： JSfiddlecol-xs-12

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