Question

我是bootsrap的新手，所以这个问题可能很简单，但我在调整标签大小时遇到了问题。

这是一个简单的代码段：

<div class="container">
    <div class="row">
        <div class="col-xs-3">
            <input type="submit" value="<< Back" class="btn btn-danger btn-block"></input>
        </div>
        <div class="col-xs-9">
            <label class="label-info label col-xs-12">This label is too little!</label>
        </div>
    </div>
</div>

你可以在这里找到一个有效的JSFiddle： http://jsfiddle.net/DTcHh/2446/

正如您所看到的，input占据了3列，它被正确分配，并且也高于label。我希望label能够：

与按钮的高度相同
填写所有可用的水平空间（分配了9列，而不是仅填充文本所需的空间，就像现在一样）。

按钮的行为是正确的，这要归功于btn-block类，这使得它填充了可用的3列，但label没有等效的。

我怎样才能做到这一点？它可能非常简单，但我特别喜欢网络内容和引导程序，任何人都可以启发我吗？

Answer 1

基础.label样式不允许这样做。我的建议是定义您自己的.label-block样式，您可以使用它代替label。像这样的东西会起作用

.label-block {
    font-weight: normal;
    display: block;
    padding: 6px 12px;
    margin: 0;
    border: 1px solid transparent;
    color: #fff;
    text-align: center;
    white-space: nowrap;
    vertical-align: baseline;
    border-radius: .25em;
    width: 100%;
}

然后在你的HTML中，只使用那种风格而不是label

<div class="container">
    <div class="row">
        <div class="col-xs-3">
            <input type="submit" value="<< Back" class="btn btn-danger btn-block"></input>
        </div>
        <div class="col-xs-9">
            <label class="label-info label-block">This label is too little!</label>
        </div>
    </div>
</div>

JSFidlle供参考。

Bootstrap 3标签：填充可用空间

1 个答案: