Question

我有一个包含课程form- horizontal的表单，我正在努力让list-inline与班级form-control一起工作，但这两个似乎并没有很好地协同工作：

没有form-control：

<form class="form-horizontal">
    <div class="row">
        <div class="col-lg-12 col-md-12 col-xs-12">
            <div class="form-group">
                <div class="controls">
                    <label for="years_of_experience" class="col-sm-3 control-label">Time Period</label>
                    <div class="col-sm-7">
                        <ul class="list-inline">
                            <li>
                                <select >
                                    <option value="">Choose...</option>

                                </select>
                            </li>
                            <li>
                                <input type="text" style="width: 60px;" maxlength="4" class="year" placeholder="Year">  <span class="to">&ndash;</span>

                            </li>
                            <li>
                                <div class="ended-position">
                                    <select >
                                        <option value="">Choose...</option>

                                    </select>
                                    <input type="text" style="width: 60px;" maxlength="4" placeholder="Year">
                                </div>
                            </li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>
</form>

jsFiddle

使用form-control ：

<form class="form-horizontal">
<div class="row">
    <div class="col-lg-12 col-md-12 col-xs-12">
        <div class="form-group">
            <div class="controls">
                <label for="years_of_experience" class="col-sm-3 control-label">Time Period</label>
                <div class="col-sm-7">
                    <ul class="list-inline">
                        <li>
                            <select class="form-control">
                                <option value="">Choose...</option>

                            </select>
                        </li>
                        <li>
                            <input type="text" class="form-control" style="width: 60px;" maxlength="4" class="year" placeholder="Year"> <span class="to">&ndash;</span>

                        </li>
                        <li>
                            <div class="ended-position">
                                <select class="form-control">
                                    <option value="">Choose...</option>

                                </select>
                                <input type="text" class="form-control" style="width: 60px;" maxlength="4" placeholder="Year">
                            </div>
                        </li>
                    </ul>
                </div>
            </div>
        </div>
    </div>
</form>

jsFiddle
我用谷歌搜索，无法找到我的问题的答案（也许我的关键词是错误的）。

我的问题是：

为什么list-inline无法使用form-control？什么可能是解决方案（修复/解决方案）？

更新

我得到了更多，inline，但仍然无法正常工作：jsfiddle

仍然试图弄清楚为什么它不能正常工作......

Answer 1

它没有内联对齐，因为你没有提供内联空间

解决方案是为他们分配col width， working demo here

将简单<li>替换为<li class="col-xs-3">，如

 <li class="col-xs-3">
   <input type="text" class="form-control" maxlength="4" class="year" placeholder="Year" />
 </li>

为什么会有效？：由于您没有提及col尺寸，所有<li>根据其width对齐，从而错放了其他{{1}他们旁边的

Answer 2

供将来参考，以及Bootstrap 4用户。

<ul class="list-inline">
  <li class="list-inline-item">Menu 1</li>
  <li class="list-inline-item">Menu 2</li>
  <li class="list-inline-item">Menu3</li>
</ul>

Answer 3

它不起作用，因为表单控件使用display:block和width:100%属性。为了使它工作覆盖类。

<强> Working Demo

<强> CSS

.form-control {
    display:inline;
    width:auto;
}

Answer 4

检查这个小提琴： -

Fiddle

<div class="col-lg-4">
    <div class="bs-example">
        <ul class="list-group">
            <li class="list-group-item"> <span class="badge">14</span>
Cras justo odio</li>
            <li class="list-group-item"> <span class="badge">2</span>
Dapibus ac facilisis in</li>
            <li class="list-group-item"> <span class="badge">1</span>
Morbi leo risus</li>
        </ul>
    </div>
</div>

您需要更改CSS文件。我刚刚更改了Bootstrap CSS。

Bootstrap3 list-inline无法使用表单控件

4 个答案: