Question

我正在使用Twitter Bootstrap的导航栏，类为navbar-static-top。当元素超出主体宽度时，它们不会扩展主体，而只是“移出它”，从而导致导航栏不会扩展。我怎么能强制我的导航栏适合我的页面的整个顶部？

我正在使用DataTables并且在移动设备中，表格大于身体宽度并超出了body元素的界限，但导航栏以身体宽度结束。我希望导航栏能够继续，直到页面上还有可滚动的空间。

这是我的导航栏代码：

<nav class="navbar navbar-inverse navbar-static-top navbar-lg" role="navigation">
<div class="container" >
    <!-- Brand and toggle get grouped for better mobile display -->
    <div class="navbar-header">
        <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
            <span class="sr-only">Toggle navigation</span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
        </button>
        <a class="navbar-brand" href="start.php">
            <img src="http://placehold.it/150x51&text=Logo" alt="">
        </a>
    </div>
    <!-- Collect the nav links, forms, and other content for toggling -->
    <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
        <ul class="nav navbar-nav col-lg-5 col-md-5 col-xs-12">
            <li>
                <a href="">Esileht</a>
            </li>
            <li>
                <a href="">Korraldajad</a>
            </li>
            <li>
                <a href="">Kontakt</a>
            </li>
        </ul>
        <ul class="nav navbar-nav navbar-right col-lg-4 col-md-4 col-xs-12">
            <form class="navbar-form navbar-input-group" action='functions.php' method='post'>
                <div class="form-group">
                    <select class="form-control" name='field_selector' id="field_selector">
                        <option value='pet' <?php if ($selected_field == "pet") { echo "selected";}?>>Petanque</option>
                        <option value='pil' <?php if ($selected_field == "pil") { echo "selected";}?>>Pool</option>
                      </select>
                 </div>
                 <div class="form-group">
                    <select class="form-control" name='lang_selector' id="lang_selector">
                        <option value='EE' <?php if ($selected_lang == "EE") { echo "selected";}?>>Eesti</option>
                        <option value='EN' <?php if ($selected_lang == "EN") { echo "selected";}?>>Inglise</option>
                      </select>
                 </div>
                 <button class='btn btn-primary' name='changelang'>Vaheta keelt/ala</button>
            </form>
        </ul>
    </div>

    <!-- /.navbar-collapse -->
</div>
<!-- /.container -->

这就是它在页面上的显示方式：

Body元素在导航栏结束的地方结束，我希望它超过页面的整个长度。有什么想法吗？

编辑：

添加更多代码：

<body>
    <!-- Navigation -->
    <?php include('navbar.php');?>

    <!-- Page Content -->
    <div class="container">
         <!-- In here is the form and table -->
    </div>
</body>

Answer 1

我通过向表格中添加滚动条以使用属性overflow-x: scroll不会溢出来修复此问题（因此在移动视图中，表格是可滚动的）。

静态导航栏的宽度不会

1 个答案: