Question

默认情况下，bootstrap表单元素的宽度为100％，如果class =＆＃39; form-control＆＃39;已指定。

我有一个<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>内的文字框。

小提琴将选择框和文本框一个显示在另一个之下。但是它们应该显示为内联或相邻。我们如何实现这一目标？

Answer 1

试试这个 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。

Answer 2

刚刚将代码更改为

<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;
 }

如何使用bootstrap3

2 个答案: