Question

我不知道如何在 Ipad 上缩小我的导航栏。就像现在一样，导航栏悬挂在我的徽标下面，它们应该排成一排。我试图设置col-sm-12，因为我认为div中的所有内容都需要12 col，但这不起作用。

有没有人知道我该怎么做？

HTML

<!-- begin nav -->
<nav class="navbar navbar-default" role="navigation">
    <div class="container">
        <div class="row">
            <div class="col-sm-12 col-md-12">

                <div class="navbar-header">
                    <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
                        <span class="sr-only">Toggle navigation</span>

                            <i class="fa fa-reorder"  style="padding-left: 4px; color: red;"></i>

                    </button>
                    <!-- begin logo in navigation -->
                    <a class="navbar-brand" href="https://<?php echo $_SERVER['HTTP_HOST']?>/index.php">
                        <img src="https://<?php echo $_SERVER['HTTP_HOST']?>/images/graphic/vouzalis-webdesign.png">
                    </a>
                    <!-- end logo in navigation -->
                </div>

                <div class="navbar-collapse collapse">
                    <ul class="nav nav-pills nav-main pull-right">

                        <!-- begin navigation items -->
                        <li>
                            <a href="https://<?php echo $_SERVER['HTTP_HOST']?>/index.php">Hjem</a>
                        </li>
                        <li>
                            <a href="https://<?php echo $_SERVER['HTTP_HOST']  ?>/kompetencer.php">Kompetencer</a>
                        </li>
                        <li>
                            <a href="https://<?php echo $_SERVER['HTTP_HOST']  ?>/portfolio.php">Portfolio</a>
                        </li>
                        <li>
                            <a href="https://<?php echo $_SERVER['HTTP_HOST']  ?>/om-mig.php">Om Mig</a>
                        </li>
                        <li>
                            <a href="https://<?php echo $_SERVER['HTTP_HOST']  ?>/artikler/index-artikler.php">Artikler</a>
                        </li>
                        <li>
                            <a href="https://<?php echo $_SERVER['HTTP_HOST']  ?>/kontakt.php">Kontakt</a>
                        </li>
                        <!-- end navigation items -->
                    </ul>   
                </div>

            </div>
        </div>
    </div>
</nav>
<!-- end nav -->

CSS

@media (max-width: 767px) {

/* Navigation */
.nav-main {
    float: left!important;
}
.navbar-default .navbar-collapse, 
.navbar-default .navbar-form {
    border: none;
}
.nav-main li:first-child {
    border-top: 1px dashed #444;
}

.navbar .dropdown-menu>li>a {
    padding: 15px 20px;
}

.nav-pills>li {
    float: none;
}
.nav-main {
    width: 100%;
}
.navbar-brand {
    padding: 0px 0px 0px 15px;
}
.fixednav .nav-main {
    background: #171717;
    margin-top: 14px;
}
.fixednav .nav-pills>li+li {
    margin-left: 0px;
}
.dropdown-menu {
    float: none;
    position: static;
}

Answer 1

您需要在css中定义平板电脑断点。

使用其他媒体查询，例如@media (min-width: 768px) and (max-width: 1024px) {}

定义你想要的间距和高度，它会生效。

修改

我看到你有一个为min-width定义的断点：769px和max-width 991px

如果您愿意，可以保留该断点，但在查看您的网站后，真正的问题是您将包装容器类设置为750px ，并将边距0自动设置为中心。

导航栏嵌套在您的名称元素下的原因是因为此容器的宽度不足以显示它们内联。

您可以将容器放大100％宽度并调整边距或缩小导航按钮。

或两者的组合。

在ipad

1 个答案: