Javascript 如何解决：导航栏样式问题_Javascript_Html_Css_Twitter Bootstrap 3

Javascript 如何解决：导航栏样式问题

javascript html css twitter-bootstrap-3

Javascript 如何解决：导航栏样式问题,javascript,html,css,twitter-bootstrap-3,Javascript,Html,Css,Twitter Bootstrap 3,以下是上导航栏的代码在错误的导航栏页面上检查了引导版本，它是3.3.7 <div class="col-lg-9 col-md-5 col-sm-6 col-xs-12 toll-col-mob"> <div style="background: #85B540!important; width: 95rem; height: 2rem; "> <div class="hotlines text-white">Contact No.

以下是上导航栏的代码

在错误的导航栏页面上检查了引导版本，它是3.3.7

<div class="col-lg-9 col-md-5 col-sm-6 col-xs-12 toll-col-mob">
    <div style="background: #85B540!important; width: 95rem; height: 2rem; ">
        <div class="hotlines text-white">Contact No.
            <a href="#" class="toll-no">0222-8981111</a>
            <!-- <a href="tel:1 800 212 8888" class="toll-no">1 800 212 8888</a> -->
        </div>
    </div>

    <div style="background: #18191b!important; padding-top: 15px">
        <nav class="toplinks">
            <ul>
                <li><a href="#" class="">Vimal Developers</a></li>

                <li class="drop-drown-menu clearfix">
                    <a href="omkar-1973-worli#" class="active">projects</a>
                    <ul class="dropdown-content menu-show">
                        <li>
                            <a href="#" class="">Residential</a>
                        </li>

                        <li>
                            <a href="#" class="">Commercial</a>
                        </li>
                    </ul>
                </li>

                <li><a href="#" class="">Contact Us</a></li>


            </ul>
        </nav>


联络电话。

我想让它看起来像上的主页。此页面正在使用v4

这就是上面的代码（坏导航栏）：

这就是我希望它看起来的样子：

有人请救我一天

U在柱结构中不需要导航栏。请尝试使用此代码。希望能帮助你

 <body style="padding: 0; margin: 0;">
  <div class="toll-col-mob">
    <div style="background: #85B540!important; height: 2rem; " >
      <div class="hotlines text-white">Contact No.
       <a href="#" class="toll-no">0222-8981111</a>
       <!-- <a href="tel:1 800 212 8888" class="toll-no">1 800 212 8888</a> -->
     </div>
   </div>
   <div style="background: #18191b!important; padding-top: 15px">
    <nav class="toplinks">
      <ul>
        <li><a href="#" class="">Vimal Developers</a></li>    /  

        <li class="drop-drown-menu clearfix">
          <a href="omkar-1973-worli#" class="active">projects</span></a>
          <ul class="dropdown-content menu-show">
            <li>
              <a href="#" class="" >Residential</a>
            </li>

            <li>
              <a href="#" class="" >Commercial</a>
            </li>
          </ul>
        </li> /
        <li><a href="#" class="">Contact Us</a></li>
      </ul> 
    </nav>
  </body>


联络电话。

/







/

U在列结构中不需要导航栏。请尝试使用此代码。希望能帮助你

 <body style="padding: 0; margin: 0;">
  <div class="toll-col-mob">
    <div style="background: #85B540!important; height: 2rem; " >
      <div class="hotlines text-white">Contact No.
       <a href="#" class="toll-no">0222-8981111</a>
       <!-- <a href="tel:1 800 212 8888" class="toll-no">1 800 212 8888</a> -->
     </div>
   </div>
   <div style="background: #18191b!important; padding-top: 15px">
    <nav class="toplinks">
      <ul>
        <li><a href="#" class="">Vimal Developers</a></li>    /  

        <li class="drop-drown-menu clearfix">
          <a href="omkar-1973-worli#" class="active">projects</span></a>
          <ul class="dropdown-content menu-show">
            <li>
              <a href="#" class="" >Residential</a>
            </li>

            <li>
              <a href="#" class="" >Commercial</a>
            </li>
          </ul>
        </li> /
        <li><a href="#" class="">Contact Us</a></li>
      </ul> 
    </nav>
  </body>


联络电话。

/







/

我想在你的第二个分区中，“宽度”将是100%

<div style="background: #85B540!important; width: 100%; height: auto;" >

如果不起作用，请再解释一下。

我想在你的第二部分中，“宽度”将是100%

<div style="background: #85B540!important; width: 100%; height: auto;" >

如果不起作用，请多解释一点。

试试这个：

body{
  padding:0;
  margin:0;
}
<div class="">
                <div style="background: #85B540!important; width: 100vw; height: 2rem" >
                <div class="hotlines text-white ">Call:
                 <a href="#" class="toll-no">0222-8981111</a>

                </div>
                </div>

                <div style="background: #18191b!important; padding-top: 15px">
                <nav class="toplinks">
                    <ul>
                        <li><a href="#" class="">Vimal Developers</a></li>    /  

                        <li class="drop-drown-menu clearfix">
                            <a href="omkar-1973-worli#" class="active">projects</span></a>
                            <ul class="dropdown-content menu-show">
                                <li>
                                    <a href="#" class="" >Residential</a>
                                </li>

                                <li>
                                    <a href="#" class="" >Commercial</a>
                                </li>
                            </ul>
                        </li> /

                        <li><a href="#" class="">Contact Us</a></li>


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

正文{
填充：0；
保证金：0；
}
电话：

/







/

试试这个：

body{
  padding:0;
  margin:0;
}
<div class="">
                <div style="background: #85B540!important; width: 100vw; height: 2rem" >
                <div class="hotlines text-white ">Call:
                 <a href="#" class="toll-no">0222-8981111</a>

                </div>
                </div>

                <div style="background: #18191b!important; padding-top: 15px">
                <nav class="toplinks">
                    <ul>
                        <li><a href="#" class="">Vimal Developers</a></li>    /  

                        <li class="drop-drown-menu clearfix">
                            <a href="omkar-1973-worli#" class="active">projects</span></a>
                            <ul class="dropdown-content menu-show">
                                <li>
                                    <a href="#" class="" >Residential</a>
                                </li>

                                <li>
                                    <a href="#" class="" >Commercial</a>
                                </li>
                            </ul>
                        </li> /

                        <li><a href="#" class="">Contact Us</a></li>


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

正文{
填充：0；
保证金：0；
}
电话：

/







/

试试这个：

.toll-col-mob {
    width:100%;
}
.toplinks ul {
    display: flex;
    justify-content: center;
    color: #fff;
    margin-bottom: 0;
    font-size: 14px;
    font-weight: 700;
}

试试这个：：：

.toll-col-mob {
    width:100%;
}
.toplinks ul {
    display: flex;
    justify-content: center;
    color: #fff;
    margin-bottom: 0;
    font-size: 14px;
    font-weight: 700;
}

根据您的大屏幕代码，您只需使用9列

col-lg-9 col-md-5 col-sm-6 col-xs-12

。它将如何占据整个屏幕。更新后的绿色导航栏上的代码仍未覆盖整个屏幕：（删除了col部分并尝试100%宽度，而不是按照您的大屏幕代码，仅使用9列

col-lg-9 col-md-5 col-sm-6 col-xs-12

。它将如何占据整个屏幕。更新后的绿色导航栏上的代码仍然没有覆盖整个宽度：（删除了列部分并尝试了100%宽度，而不是更新了绿色导航栏上的代码仍然没有覆盖整个宽度：（设置宽度：100vw，然后检查i更新了绿色导航栏上的代码仍然没有覆盖整个宽度：（设置宽度：100vw，然后检查i更新绿色导航栏上的代码仍不覆盖整个宽度：（更新绿色导航栏上的代码仍不覆盖整个宽度）：（更新绿色导航栏上的代码仍不覆盖整个宽度：（也尝试了宽度100%代码，但没有进行任何更改。绿色导航栏上的代码仍然没有覆盖整个宽度：（也尝试了宽度100%的代码，但它没有做任何更改汉克斯一吨！我添加了代码，它工作了。将在一段时间内使其生效。你知道如何解决缩小屏幕尺寸时导航栏

组件消失的问题吗？请参阅此链接：：：谢谢一吨！我添加了代码，它工作了。将在一段时间内使其生效。你知道吗如何解决缩小屏幕尺寸时导航栏

组件消失的问题？请参阅以下链接：