html - 导航栏导航链接在不同的分辨率/媒体查询中移动？

Question

在宽度为 768-889 的分辨率下查看我的网站时出现问题，链接显示如下；

我知道通过使用媒体查询我可以解决这个问题，但我不知道是哪个。

我知道它在平板电脑媒体查询中，如下所示，具有最小和最大宽度。

我变了

.navbar-nav > li {

字体大小，内边距

还有

.navbar .navbar-nav {

fontsize, padding,position:absolute;, justified 等

/* tablets */
@media (max-width: 991px) and (min-width: 768px) {
    .slider-size {
        height: auto;
    }
    .slider-size > img {
        width: 80%;
    }
    .navbar-nav > li {
        font-size; 14px;

    .navbar .navbar-nav {
        display: inline-block;
        float: none;
        vertical-align: top;
}

请求的 HTML..

<div id="container">
     <header class="clearfix">
             <div class="navbar navbar-default">

             <!-- 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">

                               <i class="glyphicon glyphicon-resize-vertical" style="font-size: 16px;color:#04fa00"></i>

                       </button>
                          <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" rel="home" href="#">
                                <img style="max-width:100px; margin-top: -16px;"
                                src="/images/mainlogo.png">
    </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 navbar-right">
                            <li><a href="index.html">HOME</a></li>
                            <li><a href="about.html">ABOUT</a></li>
                            <li><a href="services.html">SERVICES</a></li>
                            <li><a href="testimonals.php">TESTIMONALS</a></li>
                            <li><a href="gallery.php">GALLERY</a></li>
                            <li><a href="contact.php">CONTACT</a></li>
                            <li><a href="admin.php">ADMIN</a></li>
                        </ul>
                  </div><!-- /.navbar-collapse -->
             </div><!-- /.navbar navbar-default -->
     </header>

任何帮助将不胜感激。我知道这很简单:?

Answer 1

试试这个:

非常简单!!

删除所有这些 css 并使用它:

    a {
    padding: 20px 10px 20px 10px !important;
}

.item {
    text-align: center;
    width: auto;
}

.bs-example {
    margin: 10px;
}


.slider-size {
    width: 100%;
}

.carousel {
    width: 80%;
    margin: 0 auto; /* center your carousel if other than 100% */
}

/* Mobile */
@media (max-width: 767px) {
    .slider-size {
        height: 250px;
    }

        .slider-size > img {
            width: 80%;
        }

    .navbar-default .navbar-nav > li > a {
        line-height: 25px;
    }

    /* tablets */
    @media (max-width: 991px) and (min-width: 768px) {
        .slider-size {
            height: auto;
        }

            .slider-size > img {
                width: 80%;
            }

        .navbar-default .navbar-nav > li > a {
            padding: 30px 30px 30px 30px !important;
        }
    }

    /* laptops */
    @media (max-width: 1023px) and (min-width: 992px) {
        .slider-size {
            height: 200px;
        }

            .slider-size > img {
                width: 80%;
            }
    }

    /* desktops */
    @media (min-width: 1024px) {
        .slider-size {
            height: 200px;
        }

            .slider-size > img {
                width: 60%;
            }

        .navbar-default .navbar-nav > li > a {
            line-height: 25px;
        }
    }
}

希望你的问题能得到解决!