Question

我创建了一个带引导程序的网站，在导航栏上，我有一个冗长的名字。在计算机，平板电脑和大型手机（iPhone 6+）上看起来很好。当我使用较小的iPhone（例如5s或4s）查看它时，它会将导航栏中的网站标题打破到下一行。我附加了一个位于here的Jsfiddle。谢谢！

<title>Superlong website name title here</title>
<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
    <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
    <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body>
    <!--Nav -->
    <div class="navbar navbar-default navbar-fixed-top">
        <div class="container">
            <div class="row">
                <div class="col-xs-6"> <a href="#" class="navbar-brand" style="color: rgb(41,101,168);">Super long Website name</a>

                    <button class="navbar-toggle" data-toggle="collapse" data-target=".navHeaderCollapse"> <span class="icon-bar"></span>
 <span class="icon-bar"></span>
 <span class="icon-bar"></span>

                    </button>
                </div>
                <div class="col-xs-6">
                    <div class="collapse navbar-collapse navHeaderCollapse">
                        <ul class="nav navbar-nav navbar-right">
                            <li><a style="color: rgb(41,101,168);" href="#"><span class="glyphicon glyphicon-info-sign" aria-hidden="true"></span> About</a>
                            </li>
                            <li><a style="color: rgb(41,101,168);" href="#"><span class="glyphicon glyphicon-question-sign" aria-hidden="true"></span> FAQ</a>
                            </li>
                            <li class="dropdown"><a style="color: rgb(41,101,168);" href="#" class="dropdown-toggle" data-toggle="dropdown"><span class="glyphicon glyphicon-paperclip" aria-hidden="true"></span> Online Resources <span class="caret"></span></a>

                                <ul class="dropdown-menu">
                                    <li><a href="#" target="_blank">VA Forms</a>
                                    </li>
                                    <li><a href="#" target="_blank">eBenefits</a>
                                    </li>
                                </ul>
                                <li><a style="color: rgb(41,101,168);" href="#">Locations</a>
                                </li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>
    </div>

Answer 1

这是我对您的代码段的更改

的变化：

*评论.navbar-brand和。的高度 *移动右侧div上的导航栏切换按钮

您可以在更新的fiddle

上看到它

这是代码

<title>Superlong website name title here</title>
<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
    <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
    <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body>
    <!--Nav -->
    <div class="navbar navbar-default navbar-fixed-top">
        <div class="container">
            <div class="row">
                <div class="col-xs-6"> <a href="#" class="navbar-brand" style="color: rgb(41,101,168);">Super long Website name</a>
                </div>

                <div class="col-xs-6">
                    <button class="navbar-toggle" data-toggle="collapse" data-target=".navHeaderCollapse"> <span class="icon-bar"></span>
 <span class="icon-bar"></span>
 <span class="icon-bar"></span>

                    </button>                    
                    <div class="collapse navbar-collapse navHeaderCollapse">
                        <ul class="nav navbar-nav navbar-right">
                            <li><a style="color: rgb(41,101,168);" href="#"><span class="glyphicon glyphicon-info-sign" aria-hidden="true"></span> About</a>
                            </li>
                            <li><a style="color: rgb(41,101,168);" href="#"><span class="glyphicon glyphicon-question-sign" aria-hidden="true"></span> FAQ</a>
                            </li>
                            <li class="dropdown"><a style="color: rgb(41,101,168);" href="#" class="dropdown-toggle" data-toggle="dropdown"><span class="glyphicon glyphicon-paperclip" aria-hidden="true"></span> Online Resources <span class="caret"></span></a>

                                <ul class="dropdown-menu">
                                    <li><a href="#" target="_blank">VA Forms</a>
                                    </li>
                        target="_blank">eBenefits</a>
                                    </li>
                                </ul>
                                <li><a style="color: rgb(41,101,168);" href="#">Locations</a>
                                </li>
                        </ul>
                    </div>

                </div>

            </div>

        </div>

    </div>

和css

.navbar-brand {
    float: left;
    /*height: 50px;*/
    padding: 15px 15px;
    font-size: 18px;
    line-height: 20px;
}

Bootstrap导航栏标题在小型设备上溢出

1 个答案: