html - 导航栏是垂直的，我需要它是水平的

Question

我正在使用 bootstraps 3 创建一个导航栏，但我终其一生都无法按照我想要的方式进行布局。我很难学习所有这些 Bootstrap 类(class)。无论如何，我希望这里的所有 5 个元素都水平放置在一行中，但正如您将在 fiddle 中看到的那样，所有 5 个组件都在不同的行中。有什么建议吗？

fiddle :http://jsfiddle.net/cdewey/7M7sj/1/

代码:

<nav id="navbar" class="navbar navbar-default" role="navigation">
    <div class="container-fluid">
        <form class="form form-horizontal" role="form">
            <ul class="nav navbar-nav">
                <li>
                    <div class="form-group">
                        <button type="button" class="btn btn-default btn-sm">
                        <span class="glyphicon glyphicon-chevron-left"></span>
                        </button>
                    </div>
                </li>


                <li>
                    <div class="form-group">
                        <div class="col-md-2">
                            <div class='input-group date row' id='datetimepicker1' data-date-format="YYYY/MM/DD">
                                <input type='text' class="form-control"/>
                                <span class="input-group-addon">
                                    <span class="glyphicon glyphicon-calendar"></span>
                                </span>
                            </div>
                        </div>
                    </div>
                </li>

                <li>
                    <div class="form-group">
                        <div class="col-md-2">
                            <div class='input-group date row' id='datetimepicker2'>
                                <input type='text' class="form-control" />
                                <span class="input-group-addon"><span class="glyphicon glyphicon-time"></span>
                            </span>
                            </div>
                        </div>
                    </div>
                </li>

                <li>
                    <div class="form-group">
                        <div class="col-md-2">
                            <div class='input-group date row' id='datetimepicker3'>
                                <input type='text' class="form-control" />
                                <span class="input-group-addon"><span class="glyphicon glyphicon-time"></span>
                                </span>
                            </div>
                        </div>
                    </div>
                </li>

                <li>
                    <div class="form-group">
                        <button type="button" class="btn btn-default btn-sm">
                        <span class="glyphicon glyphicon-refresh"></span>
                        </button>
                    </div>
                </li>
            </ul>
        </form>
    </div>
    <script type="text/javascript">
        $(function () {
            $('#datetimepicker2').datetimepicker({
                pickDate: false
            });
            $('#datetimepicker3').datetimepicker({
                pickDate: false
            });
            $('#datetimepicker1').datetimepicker({
                pickTime: false
            });
        });
    </script>
</nav>

Answer 1

使用这个标签打开菜单div:

<div class="navbar navbar-default navbar-fixed-top" role="navigation">

看看这个非常清楚的例子来理解它是如何工作的:http://getbootstrap.com/examples/navbar-fixed-top/