Question

我有两排bootstrap 3名男子。当它崩溃它显示垂直和水平滚动条。任何想法或方法我都可以摆脱它们。我的菜单位于 shipfms.com/1html.html Word中的工作exaplne wirtten在这里http://shipfms.btddev.com/代码低于我第一次在这里发布。希望我做得正确

谢谢

  <meta name="viewport" content="width=device-width, initial-scale=1"/>

<link href="https://fonts.googleapis.com/icon?family=Material+Icons" 
 rel="stylesheet" />
<link rel='stylesheet' href='http://fonts.googleapis.com/css?

family = Lato：400,100,100italic，300,300italic，400italic，700,700italic，900,900italic＆amp; subset = latin，latin-ext'type ='text / css'media ='all'/＆gt;

                 <nav role="navigation" class="navbar navbar-default">
            <!-- Brand and toggle get grouped for better mobile display -->
            <div class="navbar-header">
                <button type="button" data-target="#navbarCollapse" data-toggle="collapse" class="navbar-toggle">
                    <span class="sr-only">Toggle navigation</span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>

                </button>

                <asp:Label ID="lblcookie" runat="server" Text=""></asp:Label>

            </div>

            <div id="navbarCollapse" class="collapse navbar-collapse">

                <div class="row" style="background-color: #064871;">
                    <div class="nav navbar-nav" style="padding-top: 5px;">
                        <i class="material-icons" style="padding-left: 100px; font-size: medium; color: white;">phone</i>
                        <span id="number" style="color: white; font-family: 'Lato', Helvetica, Arial, Lucida, sans-serif; font-size: small;">865-922-7491</span>
                        <i class="material-icons" style="font-size: medium; color: white;">&nbsp;email</i>
                        <a id="email" href="mailto:info@shipfms.com" style="text-decoration: none;">
                            <span style="color: white; font-family: 'Lato', Helvetica, Arial, Lucida, sans-serif;">info@shipfms.com</span></a>

                    </div>


                    <ul class="nav navbar-nav navbar-right" style="padding-right: 25px; margin-right: 50px;">
                        <li style="color: white; font-family: 'Lato', Helvetica, Arial, Lucida, sans-serif;"><a href="#"><span style="color: white;">Login&nbsp;</span></a></li>
                        <li><a href="#"><span style="color: white; font-family: 'Lato', Helvetica, Arial, Lucida, sans-serif;">Profile</span></a></li>
                        <li><a href="#"><span style="color: white; font-family: 'Lato', Helvetica, Arial, Lucida, sans-serif;">Messages</span></a></li>
                        <li><a href="#"><span style="color: white; font-family: 'Lato', Helvetica, Arial, Lucida, sans-serif;">Sign Up</span></a></li>
                    </ul>

                </div>

                <div class="row" style="background-color: white;">
                    <div class="col-md-3 container-fluid img-fluid " style="float: left; background-color: white;">
                        <img src="images/FMS_Logo_websiteHeadersmaller.jpg" alt="Freight Management Systems" class="img-fluid " />

                    </div>

                    <div class="col-lg-7 navbar-right " style="height: 85px; margin-right: 50px;">
                        <ul class="nav navbar-nav navbar-right" style="text-align: left; padding-top: 20px;">
                            <!--    <li>&nbsp;</li>   -->
                            <li>&nbsp;</li>
                            <li>&nbsp;</li>
                            <li>&nbsp;</li>
                            <li><a href="#"><span style="font-size: 18px; font-family: 'Lato', Helvetica, Arial, Lucida, sans-serif;">Shipping Services</span></a></li>
                            <li><a href="#"><span style="font-size: 18px; font-family: 'Lato', Helvetica, Arial, Lucida, sans-serif;">Freight Tips</span></a></li>
                            <li><a href="#"><span style="font-size: 18px; font-family: 'Lato', Helvetica, Arial, Lucida, sans-serif;">About US</span></a></li>
                            <li><a href="#"><span style="font-size: 18px; font-family: 'Lato', Helvetica, Arial, Lucida, sans-serif;">Contacts</span></a></li>
                            <li><a href="#"><span style="font-size: 18px; font-family: 'Lato', Helvetica, Arial, Lucida, sans-serif;">Blogs</span></a></li>

                        </ul>
                    </div>
                </div>
            </div>
        </nav>

Answer 1

欢迎来到SO！

我发现了导致这种情况的两个错误。对于向下滚动，它是下面的代码：

<div class="col-lg-7 navbar-right " style="height: 85px; margin-right: 50px;">

通过定义高度，您可以依次修复元素。这将阻止BS以正常方式流动。

第二个问题以及出现水平滚动的原因是因为您在第一个块上定义了一行而没有cols。

<div id="navbarCollapse" class="collapse navbar-collapse">
    <div class="row" style="background-color: #064871;">
        <div class="nav navbar-nav" style="padding-top: 5px;">

BS的工作方式是cols与行上的排水沟相矛盾，所以如果你不打算使用cols，就不需要一行了！

希望这会有所帮助。

Bootstrap 3 2行菜单显示滚动条

1 个答案: