Question

<nav class="navbar navbar-toggleable-lg navbar-light bg-faded justify-      content-center">
 <div class="container ">
<button class="navbar-toggler navbar-toggler-right" type="button"   data-toggle="collapse" data-target="#navbarText" aria-controls="navbarText"   aria-expanded="false" aria-label="Toggle navigation">
  <span class="navbar-toggler-icon m-auto"></span>
</button>

<div class="collapse navbar-collapse" id="navbarText">
  <ul class="navbar-nav mr-auto">
    <li class="nav-item active mt-5">
      <a class="nav-link" href="#">Home <span class="sr-only">(current)   </span></a>
     </li>
    <li class="nav-item mt-5">
    <a class="nav-link" href="#">About Us</a>
  </li>
  <li class="nav-item mt-5">
    <a class="nav-link" href="#">Gallery</a>
    </li>
  </ul>
   <a class="navbar-brand" href="#"><img src="_images/logo.png" alt="logo"></a>
    <ul class="navbar-nav ml-auto">
    <li class="nav-item active mt-5">
       <a class="nav-link" href="#">Services <span class="sr-only">(current)</span></a>
    </li>
     <li class="nav-item mt-5">
       <a class="nav-link" href="#">Events</a>
      </li>
     <li class="nav-item mt-5">
    <a class="nav-link" href="#">Contact Us</a>
     </li>
    </ul>

   </div>

这是我用于导航的导航引导代码

    <header>
    <div id="carouselExampleIndicators" class=" carousel slide" data-ride="carousel">
        <ol class="carousel-indicators">
            <li data-target="#carouselExampleIndicators" data-slide-to="0" class="active"></li>
            <li data-target="#carouselExampleIndicators" data-slide-to="1"></li>
            <li data-target="#carouselExampleIndicators" data-slide-to="2"></li>
        </ol>
        <div class="carousel-inner" role="listbox">

            <div class="carousel-item active" style="background-image: url('_images/Slider_1.jpg')">
                <div class="carousel-caption d-none d-md-block">
                    <h3>First Slide</h3>
                    <p>This is a description for the first slide.</p>
                </div>
            </div>

            <div class="carousel-item" style="background-image: url('_images/Slider_2.jpg')">

                <div class="carousel-caption d-none d-md-block">
                    <h3>Second Slide</h3>
                    <p>This is a description for the second slide.</p>
                </div>
            </div>

            <div class="carousel-item" style="background-image: url('_images/Slider_3.jpg')">
                <div class="carousel-caption d-none d-md-block">
                    <h3>Third Slide</h3>
                    <p>This is a description for the third slide.</p>
                </div>
            </div>
        </div>
        <a class="carousel-control-prev" href="#carouselExampleIndicators" role="button" data-slide="prev">
            <span class="carousel-control-prev-icon" aria-hidden="true"></span>
            <span class="sr-only">Previous</span>
        </a>
        <a class="carousel-control-next" href="#carouselExampleIndicators" role="button" data-slide="next">
            <span class="carousel-control-next-icon" aria-hidden="true"></span>
            <span class="sr-only">Next</span>
        </a>
    </div>
</header>

我有问题，当我在移动设备上查看我的网站在折叠导航阶段滑块上方的折叠按钮图标隐藏我是新手用引导程序所以任何人都知道如何解决此问题。抱歉英文不好

Answer 1

好的，我们走了，

从html中的justify-content-center标记中移除类nav这会导致很多问题，并在css下面应用这将解决您的CSS问题

.navbar{
  min-height: 60px;
}
.navbar .container{
  width: 100%;
}

请参阅img1

滑块重叠在导航bootstrap 4上的折叠图标上（在移动设备上）

1 个答案: