css - 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。但这仅用于缩小列的范围，如果您需要使星号适合文本描述，则不需要。

将 * 与描述相匹配

我不确定为什么你需要将 * 分隔到一个新列中，因为你可以将它放在 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