Question

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

小提琴：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/

Answer 2

JSFiddle Demo

您必须在<div class="form-group">之后移除li并将其放在ul之后。 <div class="form-group">只为每个li创建单独的实体。看看我提供的演示。你会明白的。

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

2 个答案: