个人中心
gpt4 book ai didi

css - 在 xs 屏幕尺寸下发现可折叠的导航菜单链接

转载 作者：行者123 更新时间：2023-11-28 08:44:34 26 4
gpt4 key购买 nike

当我的可折叠导航菜单在 xs 屏幕网格(宽度为 767 像素或更小)中打开时，ul 中具有“移动导航”类的三个链接(进程、办公室、联系人)被部分覆盖。知道如何发现它们吗？感谢您的帮助。

网站:

http://parkerrichard.com/studiogreen/html/index.html

HTML:

    <!DOCTYPE html>
<html>
<head>
    <meta charset=“UTF-8”>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>Studio Green</title>

    <!-- Bootstrap Core CSS -->
    <link href="css/bootstrap.min.css" rel="stylesheet">

    <!-- Bootstrap Custom CSS -->
    <link href="css/custom.css" rel="stylesheet">

    <!-- Typekit Custom Fonts -->
    <script src="//use.typekit.net/bcn3ife.js"></script>
    <script>try{Typekit.load();}catch(e){}</script>

    <link href="css/flexslider.css" rel="stylesheet">

    <!--[if lt IE 9]><script src="../../assets/js/ie8-responsive-file-warning.js"></script><![endif]-->

    <!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
    <!--[if lt IE 9]><script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script><![endif]-->

    <!-- Javascript Library -->
    <script src="js/respond.min.js"></script>

    <!-- Custom Icons -->
    <link href="//maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css" rel="stylesheet">
    <link href="fonts/flexslider-icon.eot"> 
</head>

<body>
    <!-- row 1: static navbar -->
    <nav class="navbar navbar-default navbar-top" role="navigation">
        <div class="container">
            <div class="navbar-header">
                <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
                    <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 logo" href="index.html"><img class="logo" src="img/logo.png"></a>
            </div><!-- navbar toggle -->
            <div class="navbar-collapse collapse">
                <ul class="nav navbar-nav navbar-right nav-stacked hidden-xs">
                    <li><a href="process.html">PROCESS</a></li>
                    <li><a href="office.html">OFFICE</a></li>
                    <li><a href="contact.html">CONTACT</a></li>
                </ul>
                <ul class="nav navbar-nav navbar-right nav-stacked hidden-lg hidden-md hidden-sm mobile-nav">
                    <li><a href="process.html">PROCESS</a></li>
                    <li><a href="office.html">OFFICE</a></li>
                    <li><a href="contact.html">CONTACT</a></li>
                </ul>
            </div><!--/nav-collapse -->
        </div><!--/container -->
    </nav><!--/navbar -->

    <!-- row 1: body -->
    <div class="container">
        <div class="row centered">
            <!-- left sidebar -->
            <aside class="navbar-collapse collapse panel-group col-lg-3 col-med-4 col-sm-4 col-xs-12" id="accordion" role="tablist" aria-multiselectable="true">
                <div class="panel panel-default">
                    <div class="panel-heading" role="tab" id="headingOne">
                        <h4 class="panel-title">
                            <a class="collapsed" data-toggle="collapse" data-parent="#accordion" href="#collapseOne" aria-expanded="false" aria-controls="collapseOne">
                                RESIDENTIAL
                            </a>
                        </h4>
                    </div>
                    <div id="collapseOne" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingOne">
                        <div class="panel-body">
                            <ul>
                                <li class="drop"><span class="glyphicon glyphicon-chevron-down nav-caret"></span></li>
                                <li class="active"><a href="project-01.html">PROJECT <span class="spaced">1</span></a></li>
                                <li><a href="project-01.html">PROJECT  <span class="spaced">2</span></a></li>
                                <li><a href="project-01.html">PROJECT  <span class="spaced">3</span></a></li>
                                <li><a href="project-01.html">PROJECT  <span class="spaced">4</span></a></li>
                                <li><a href="project-01.html">PROJECT  <span class="spaced">5</span></a></li>
                                <li><a href="project-01.html">PROJECT  <span class="spaced">6</span></a></li>
                                <li><a href="project-01.html">PROJECT  <span class="spaced">7</span></a></li>
                                <li><a href="project-01.html">PROJECT  <span class="spaced">8</span></a></li>
                                <li><a href="project-01.html">PROJECT  <span class="spaced">9</span></a></li>
                                <li><a href="project-01.html">PROJECT  <span class="spaced">10</span></a></li>
                            </ul>
                        </div>
                    </div>
                </div>
                <div class="panel panel-default">
                    <div class="panel-heading" role="tab" id="headingThree">
                        <h4 class="panel-title">
                            <a href="schools.html">
                                SCHOOLS
                            </a>
                        </h4>
                    </div>
                </div>
                <div class="panel panel-default">
                    <div class="panel-heading" role="tab" id="headingThree">
                        <h4 class="panel-title">
                            <a href="parks.html">
                                PARKS
                            </a>
                        </h4>
                    </div>
                </div>
                <div class="panel panel-default">
                    <div class="panel-heading" role="tab" id="headingThree">
                        <h4 class="panel-title">
                            <a href="hospitality.html">
                                HOSPITALITY
                            </a>
                        </h4>
                    </div>
                </div>            
                <div class="panel panel-default">
                    <div class="panel-heading" role="tab" id="headingFive">
                        <h4 class="panel-title">
                            <a class="collapsed" data-toggle="collapse" data-parent="#accordion" href="#collapseFive" aria-expanded="false" aria-controls="collapseFive">
                                ELEMENTS
                            </a>
                        </h4>
                    </div>
                    <div id="collapseFive" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingFive">
                        <div class="panel-body">
                            <ul>
                                <li class="drop"><span class="glyphicon glyphicon-chevron-down nav-caret"></span></li>
                                <li><a href="plants.html">ENTRY</a></li>
                                <li><a href="plants.html">FENCES</a></li>
                                <li><a href="plants.html">FIRE</a></li>
                                <li><a href="plants.html">LIGHTING</span></a></li>
                                <li><a href="plants.html">PAVING</a></li>
                                <li class="active"><a href="plants.html">PLANTS</a></li>
                                <li><a href="plants.html">POOLS</a></li>
                                <li><a href="plants.html">SEATING</a></li>
                                <li><a href="plants.html">SCULPTURE</a></li>
                                <li><a href="plants.html">STAIRS</a></li>
                                <li><a href="plants.html">SUSTAINABILITY</a></li>
                                <li><a href="plants.html">WATER</a></li>
                            </ul>
                        </div>
                    </div>
                </div>
            </aside>
            <!-- slideshow gallery -->              
            <div class="col-lg-9 col-md-8 col-sm-8 pull-right">
                <div class="flexslider nodot">
                    <ul class="slides">
                        <li>
                            <img src="img/slide_01.jpg" />
                        </li>
                        <li>
                            <img src="img/slide_02.jpg" />
                        </li>
                        <li>
                            <img src="img/slide_03.jpg" />
                        </li>
                        <li>
                            <img src="img/slide_04.jpg" />
                        </li>
                    </ul>
                </div>
            </div><!--/slideshow row -->
        </div><!--/body row -->
        <!-- address -->
        <address>232 SIR FRANCIS DRAKE BLVD</br>
        SAN ANSELMO, CA 94960</br>
        415 721 0905</address>
    </div><!--/container -->

    <!-- javaspcript -->
    <script src="http://code.jquery.com/jquery-latest.min.js"></script>
    <script src="js/bootstrap.min.js"></script>
    <script src="js/jquery.flexslider.js"></script>
    <script>
        $(window).load(function() {
          $('.flexslider').flexslider({
            animation: "fade"
          });
        });
    </script>

</body>
</html>

CSS:

    /* this is a custom css stylesheet */


/* ==========================================================================
   Base Styles, Bootstrap Modifications & Fonts Import
   ========================================================================== */

/*
 * A better looking default horizontal rule
 */

hr {
    display: block;
    height: 1px;
    border: 0;
    border-top: 1px solid #ccc;
    margin: 1em 0;
    padding: 0;
}

.centered {
    text-align: center;
}

.img-centered {
    display: block;
    margin-left: auto;
    margin-right: auto;
}

.mt-lg {
    margin-top: 100px;
}

.mt {
    margin-top: 80px;
}

.mb {
    margin-bottom: 80px;
}

.drop {
    margin-bottom: -15px;
}

.spaced {
    margin-left: 37px;
}

.sm-spaced {
    margin-left: 5px;
}

.strong {
    font-weight: bold;
    font-size: 13px;
}

.container {
    width: 100%;
}

/* ==========================================================================
   General styles
   ========================================================================== */

html, body {
    overflow-x: hidden;
}

body {
    font-family: "proxima-nova", sans-serif;
    font-weight: 500;
    font-size: 12px;
    letter-spacing: 1px;
    color: #555;

    -webkit-font-smoothing: antialiased;
    -webkit-overflow-scrolling: touch;
}

a {
    color: #555;
    outline: 0;
}

small {
    color: #555;
}

aside {
    position: absolute;
    top: 0px;
    left: 0px;
}

address {
    text-align: left;
    line-height: 23px;
    letter-spacing: 2px;
    float: right;
    padding: 90px 0px 30px 0px;
    margin-right: -35px;
    width: 315px;
}

.info-box {
    float: right;
    text-align: left;
    line-height: 17px;
    font-weight: 400;
    letter-spacing: 2px;
    width: 315px;
    height: 450px;
    padding: 60px 20px 0 15px;
}

.info-box p {
    padding-top: 12px;
}

.info-box h5 {
    padding-bottom: 8px;
    font-size: 14px;
    font-weight: 600;
}

.team-box img {
    border: 1px solid black;
    margin-bottom: 30px;
}

.contact {
    height: auto!important;
    margin-right: -35px;
}

.email {
    color: #6CAA3D;
    font-weight: 400;
}

/* ==========================================================================
   Navigation styles
   ========================================================================== */

/*
 * Top nav section
 */

.navbar-header {
    padding-bottom: 50px;
}

.navbar-brand {
    margin-left: 0px!important;
}

.navbar .nav {
    text-align: left;
    margin-top: 45px;
}

.navbar .nav > li {
    float: none;
    display: inline-block;
    font-size: 14px;
    letter-spacing: 2px;
    font-weight: 600;
}

.navbar-default {
    background-color: white;
    border-bottom: 0px;
}

.navbar-default .navbar-nav > li > a {
    color: #555;
}

.navbar-default .navbar-nav > li > a:hover, .navbar-default .navbar-nav > .active > a, .navbar-default .navbar-nav > .active > a:hover, .active > a, a:hover, a:active, a:focus {
    color: #6CAA3D;
    background-color: transparent;
    text-decoration: none;
    outline: 0;
}

.navbar-default .navbar-nav > li {
    padding: 0px 15px 15px 15px;
}

.navbar-collapse {
    margin-top: -65px;
    border-top: 0px;
    border-color: none;
}

.navbar-default .navbar-collapse {
    padding-top: 10px;
}

.logo {
    margin-top: 10px;
    height: 100px;
    width: 200px;
}

.navbar-right {
    padding: 15px 20px 0 0;
}

.mobile-nav {
    margin-left: -85px;
}

/*
 * Left aside nav
 */

.panel {
    border: 0px;
    -webkit-box-shadow: 0 0px 0px rgba(0,0,0,.0);
    box-shadow: 0 0px 0px rgba(0,0,0,.0);
    margin: 45px 0 0 100px;
}

.panel-title {
    font-size: 14px;
    letter-spacing: 2px;
    font-weight: 600;
    color: #555;
    padding-top: 7px;
    padding-bottom: 7px;
    list-style: none;
}

.panel-title a {
    text-decoration: none;
}

.panel-default > .panel-heading {
    background-color: transparent;
    border-color: transparent;
}

.panel-body {
    margin-left: -25px;
    margin-top: -22px;
    padding-top: 0px;
    padding-bottom: 0px;
    padding-left: 0px;
}

.panel-body ul {
    list-style-type: none;
}

.panel-body ul li {
    padding-top: 10px;
    padding-bottom: 10px;
    letter-spacing: 1px;
}

.panel-group {
    text-align: left;
}

.panel-group .panel-heading + .panel-collapse > .panel-body {
    border-top:0px;
}

.nav-caret {
    padding-left: 10px;
    font-size: 8px;
}

/*
 * flexslider format
 */

.flexslider{
    background:none !important;
    border:none !important;
    box-shadow:none !important;
    margin:0px -15px 0px 0px !important;
}

.flex-direction-nav a  {
    color: #999 !important;
}

.flex-next { 
    padding-right: 5px!important;
}

.flex-control-nav {
    text-align: right !important;
    padding-right: 70px !important;
}

.flex-control-paging li a {
    color: transparent !important;
}

.nodot .flex-control-paging li a { 
    display: none !important;
}

.flex-control-paging li a.flex-active {
    background: #6CAA3D !important;
}

.right {
    padding-top: auto !important;
    bottom: 0;
    right: 0;
    margin-bottom: 0px;
}

.flex-caption {
    position: absolute;
    text-align: left;
    background:rgba(255, 255, 255, 0.7);
    z-index: 1;
    padding: 20px;
    font-size: 11px;
    width: 300px;
}

.flex-caption p {
    padding-top: 12px;
}

.carousel .slides > li {
    padding-right: 10px;
}

最佳答案

添加了“overflow-y: visible”和“padding-left: 115px”来排列它们。这是更新后的 CSS:

.navbar-default .navbar-collapse {
padding-top: 10px;
overflow-y: visible;
padding-left: 115px;
}

.mobile-nav {
width: 100px;
}

关于css - 在 xs 屏幕尺寸下发现可折叠的导航菜单链接，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/27660982/

26 4 0
文章推荐： javascript - Sencha ExtJS store.nextPage() 然后 store.first() 给出上一页的第一个记录
文章推荐： Javascript 幻灯片到 css
文章推荐： JavaScript 自动加载器 : How To Recover From Errors
文章推荐： javascript - 如何基于对象动态创建和链接到页面？
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com