6

我是 twitter bootstrap 的新手，我正在使用水平表单。我的代码是这样的：

<form class="form-horizontal">
    <div class="control-group">
        <label class="control-label" for="whatever">Whatever</label>
        <div class="controls">
            <select id="whatever" name="whatever">
                <option value="blah">Blah</option>
            </select>
        </div>
    </div>
    <div class="control-group">
        <label class="control-label" for="another">Another</label>
        <div class="controls">
            <select id="something" name="something">
                <option value="MyEntry">MyEntry</option>
            </select>
        </div>
    </div>
    <button type="submit" class="btn">Search</button>
</form>

当我这样做时，表格看起来很好。唯一的问题是控制标签的长度太长了，所以标签左侧有很多空白。有没有办法缩短标签，所以我没有得到尽可能多的空白？

谢谢。

4

3 回答 3

10

我通过创建几个额外的表单类并根据我需要的大小使用它们来做到这一点。

这是我的CSS：

.form-small .control-label {
    width: 100px;
}

.form-small .controls {
    margin-left: 120px;
}

.form-medium .control-label {
    width: 180px;
}

.form-medium .controls {
    margin-left: 200px;
}

.form-xlarge .control-label {
    width: 240px;
}

.form-xlarge .controls {
    margin-left: 260px;
}

所以如果我需要小标签：

<form class="form-horizontal form-small">

<!-- form body -->

</form>

当然，您可以根据需要设置自己的宽度.control-label和宽度。.controls

希望有帮助！

于 2013-04-03T18:33:10.727 回答
0 
<form class="form-inline" 
    ng-submit="addCategory(transaction, categoryText)" 
    style='display:inline;'>
    <span class="span2">
        <label style='display:inline; width:140px'>{{param}}</label>
    </span>
    <input type="text" ng-model="categoryText" size="20" placeholder="add category">
</form>

我通常在“span”元素中跨越需要固定大小的元素，但这是为了生成重复的表单

于 2013-07-04T13:25:19.630 回答
0

尝试使用创建一个容器：

<div class="set_inline_block_class_selector">
 <label>
    <input type="radio" name="example_radio">Bootstrap radio button with controlled label
 </label>
</div>

<style>
 .set_inline_block_class_selector label{
     display: inline-block;
  }
</style>
于 2015-06-18T15:47:02.343 回答