html - Bootstrap3 列表内联不适用于表单控件

Question

我有一个类 form- horizo​​ntal 的表单，我正在尝试让一个 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

供将来引用和 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>