1

选择和输入的右侧在我的引导水平形式中未对齐。根据我的调试，看起来输入超出了父 div 的边界，而选择行为良好并尊重边界。我如何“说服”输入与选择保持一致

这是我的小提琴：http: //jsfiddle.net/bjFXe/6/

CSS

input, select {
width: 100%;
overflow: hidden;
}

HTML

<form class="form-horizontal">
<div class="accordion row-fluid" id="accordion">
    <div class="accordion-group">
        <div class="accordion-heading"> <a class="accordion-toggle" data-toggle="collapse" href="#main">
                Main
            </a>

            <div id="main" class="accordion-body collapse in">
                <div class="accordion-inner">
                    <fieldset>
                        <div class="row-fluid">
                            <div class="span6">
                                <div class="control-group warning">
                                    <label class="control-label" for="test1">test1</label>
                                    <div class="controls">
                                        <select id="test1">
                                            <option>option 1</option>
                                            <option>option 2</option>
                                        </select>
                                    </div>
                                </div>
                                <div class="control-group">
                                    <label class="control-label" for="test2">Test2</label>
                                    <div class="controls">
                                        <input type="text" placeholder="Test2" id="test2">
                                    </div>
                                </div>
                            </div>
                            <div class="span6">
                                <div class="control-group">
                                    <label class="control-label" for="test3">test3</label>
                                    <div class="controls">
                                        <input type="text" id="test3">
                                    </div>
                                </div>
                                <div class="control-group warning">
                                    <label class="control-label" for="test4">test4</label>
                                    <div class="controls">
                                        <select id="test4">
                                            <option>option 1</option>
                                            <option>option 2</option>
                                        </select>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </fieldset>
                </div>
            </div>
        </div>
    </div>
</div>

4

2 回答 2

1

最简单的解决方案是input-block-level在输入字段上使用类。这会将输入转换为块级别，因此它们将占用所有可用空间。

<input type="text" placeholder="Test2" id="test2" class="input-block-level"/>

此类是引导框架的一部分，因此您无需添加额外的自定义 css。

于 2013-07-04T09:57:58.953 回答
0

我不完全知道为什么会这样。看起来像填充/边距问题。但是，设置绝对值有效：

input, select {
    width: 12;
    overflow: hidden;
}
于 2013-07-04T09:49:17.200 回答