如何使用 bootstrap3 显示 2 个 50% 大小的表单元素答案

【问题标题】：How to display 2 50% sized form element using bootstrap3如何使用 bootstrap3 显示 2 个 50% 大小的表单元素
【发布时间】：2016-03-22 13:38:09
【问题描述】：

默认情况下，如果指定了 class= 'form-control'，则引导表单元素采用 100% 的宽度。

我有一个<div class="col-xs-12 col-md-2"/>。我想水平显示一个选择框和文本框（内联），顶部有一个标签。每个组件应该只占用 50% 的宽度。另外我想在里面放一个面板

<div class="col-xs-12 col-md-2">

试试小提琴

https://jsfiddle.net/haribalaji/apd1sucL/4/

部分代码如下。

<form>
    <div class="col-xs-12 col-md-2">
        <div class="form-group">
            <label for="incidence">Incidence</label>
            <div class="panel panel-default panel-body">
                <div>
                    <select style="margin-top:0px;" class="form-control half-width-form-control" id="incidenceOperator" name="incidenceOperator">
                    <option value="0" disabled="">Choose Operator</option><option value="1">&lt;</option>
                    <option value="2">≤</option><option selected="" value="3">=</option>
                    <option value="4">≥</option>
                    <option value="5">&gt;</option></select><div class="input">
                </div>
            </div>
            <input type="text" name="incidence" class="form-control half-width-form-control pull-right">
        </div>
    </div>
</form>

我不希望 <select> 框在 <col-md-1> 中，文本框在另一个 <col-md-1> 中。

小提琴在另一个下方显示选择框和文本框。但是，它们应该显示为内联或相邻。我们如何做到这一点？

【问题讨论】：

标签： twitter-bootstrap-3

【解决方案1】：

只是将您的代码更改为

<form>
<div class="row">
    <div class="col-xs-12 col-md-2">
        <div class="form-group">
            <label for="autoSuggest">Term</label>
            <div class="react-autosuggest__container">
                <input type="text" value="" autocomplete="off" role="combobox" aria-autocomplete="list" aria-owns="react-whatever-1" aria-expanded="false" class="react-autosuggest__input" placeholder="Type an ADR Term"></div>
                <div class="status"></div>
            </div>
        </div>
    <div class="col-xs-12 col-md-2">
        <div class="form-group">
            <label for="incidence">Incidence</label>
            <div class="panel panel-default panel-body">
                    <select  class="form-control half-width-form-control" id="incidenceOperator" name="incidenceOperator">
                    <option value="0" disabled="">Choose Operator</option><option value="1">&lt;</option>
                    <option value="2">≤</option><option selected="" value="3">=</option>
                    <option value="4">≥</option>
                    <option value="5">&gt;</option></select> 
                 <input type="text" name="incidence" class="form-control half-width-form-control pull-right">
        </div>
    </div>
    </div>
    </div></form>

和css

.half-width-form-control {
           display: inline-block;
           width: calc(50% - 2px);
            float: left;
           box-sizing: border-box;
           margin-top: 5px;
 }

【讨论】：

欢迎，编码愉快

【解决方案2】：

试试这个 https://jsfiddle.net/virginieLGB/apd1sucL/10/

基本上，您希望面板的子项是内联的，而不是选择。

#yourDiv > * {
  display: inline-block;
  width: calc(50% - 5px);
  /*min-width: 200px;*/ /* this is to make it more responsive. If screen is smaller than 400px, they go back to being vertically aligned */
}
#yourDiv select {
  width: 100%;
}

是否要使用最小宽度取决于您。我建议你这样做，或者添加响应式 CSS。

【讨论】：