Question

选择和输入的右侧没有以我的自举水平形式对齐。根据我的调试，看起来输入超出了父div的边界，而选择表现良好并且尊重边界。如何“说服”输入以与选择

对齐

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>

Answer 1

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

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

此类是引导框架的一部分，因此您不会添加其他自定义css。

Answer 2

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

input, select {
    width: 12;
    overflow: hidden;
}

Bootstrap水平格式输入和选择不对齐

2 个答案: