在移动视图中，引导导航栏和画廊的宽度缩短了

时间：2020-03-01 09:13:07

标签： html css twitter-bootstrap web

enter image description here

所以我对引导导航栏和图库有一个奇怪的问题，它在移动视图中显示的较短，而在移动视图中却没有延伸。在桌面版本上还可以，我没有任何这些问题。我已经附上了屏幕截图，还将导航栏和图库滑块的代码放到下面。嗨！

导航栏：

<nav class="navbar navbar-custom navbar-expand-lg" style="height:60px !important;">
   <a class="navbar-brand pull-bs-canvas-left " href="#"><i class="fa fa-bars"></i></a>


   <div class="collapse navbar-collapse" id="navbarSupportedContent">
     <ul class="navbar-nav mr-auto">
       <li class="nav-item active">
           <a class="navbar-brand" href="#"><img src="img/amazon.png"></a>
       </li>
     </ul>
     <div style="width:88%; position:relative; right: 15px;">
       <div class="input-group">
          <div class="input-group-btn search-panel">
           <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" style="background-color:rgb(218, 218, 218);">
             <span id="search_concept">All</span> <span class="caret"></span>
           </button>
           <ul class="dropdown-menu scrollable-dropdown" role="menu">
             <li><a href="#">Automotive Accesories</a></li>
             <li><a href="#">Cell Phone Accesories</a></li>
             <li><a href="#">Computer Accesories</a></li>
             <li><a href="#">Health and Personal Care</a></li>
             <li><a href="#">Automotive Accesories</a></li>
             <li><a href="#">Cell Phone Accesories</a></li>
             <li><a href="#">Computer Accesories</a></li>
             <li><a href="#">Health and Personal Care</a></li>
             <li><a href="#">Automotive Accesories</a></li>
             <li><a href="#">Cell Phone Accesories</a></li>
             <li><a href="#">Computer Accesories</a></li>
             <li><a href="#">Health and Personal Care</a></li>
             <li><a href="#">Automotive Accesories</a></li>
             <li><a href="#">Cell Phone Accesories</a></li>
             <li><a href="#">Computer Accesories</a></li>
             <li><a href="#">Health and Personal Care</a></li>
           </ul>
          </div>
          <input type="hidden" name="search_param" value="all" id="search_param">
          <input type="text" class="form-control" name="x" id="search" placeholder="Search">
          <span class="input-group-btn">
              <button class="btn btn-default" type="button" style="background-color: #F3A847;">
                <i class="fas fa-search" style="color: black;"></i>
              </button>
          </span>
         </div>
    </div>
     </div>
     <ul class="navbar-nav ml-auto" style="margin-top:10px;">
       <li class="nav-item dropdown nav-itemspan">
         <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
           <span>EN</span><i style="font-size:0.903em" class="fal fa-globe"></i>
         </a>
         <div class="dropdown-menu" aria-labelledby="navbarDropdown">
           <a class="dropdown-item" href="#">English</a>
           <a class="dropdown-item" href="#">Hindi</a>
         </div>
       </li>
       <li class="nav-item nav-itemspan">
         <a class="nav-link" href="sign_in.html"><span style="">Hello. Sign in</span><p style="font-size:14px; margin-top:0px;"><b>Accounts & Lists</b></p></a>
       </li>
       <li class="nav-item nav-itemspan">
         <a class="nav-link" href="#"><span style="">Returns</span><p style="font-size:14px; margin-top:0px;"><b>& Orders</b></p></a>
       </li>
       <li class="nav-item nav-itemspan">
         <a class="nav-link" href="#"><span style="">Try</span><p style="font-size:14px; margin-top:0px;"><b>Prime</b></p></a>
       </li>
       <li class="nav-item">
         <a class="nav-link" href="#"><img src="img/cart_0.png" style="margin-top:2px;"></a>
       </li>
     </ul>
 </nav>

 <nav class="navbar navbar-custom navbar-expand-lg" style="position:relative; bottom:10px; height: 50px;">

   <div class="collapse navbar-collapse" id="navbarSupportedContent">
     <ul class="navbar-nav mr-auto" style="margin-top:30px;">
       <li class="nav-item">
       <i class="fal fa-map-marker-alt fa-lg" style="color:white; margin-top:18px;"></i>
       </li>
       <li class="nav-item nav-itemspan", style="">
         <a class="nav-link" href="#"><span style="font-weight:bold; color:white !important;">Hello</span><p style="font-size:14px; position:relative; bottom:6px;"><b>Select your address</b></p></a>
       </li>
       <li class="nav-item nav-itemspan" style="margin-left:24px;">
         <a class="nav-link" href="sale_page.html"><p style="font-size:14px; margin-top:0px; color: #bfbfbf;">Amazon Pay</p></a>
       </li>
       <li class="nav-item nav-itemspan">
         <a class="nav-link" href="#"><p style="font-size:14px; margin-top:0px; color: #bfbfbf;">Today's deals</p></a>
       </li>
       <li class="nav-item nav-itemspan">
         <a class="nav-link" href="#"><p style="font-size:14px; margin-top:0px; color: #bfbfbf;">Best sellers</p></a>
       </li>
       <li class="nav-item nav-itemspan">
         <a class="nav-link" href="#"><p style="font-size:14px; margin-top:0px; color: #bfbfbf;">Mobiles</p></a>
       </li>
       <li class="nav-item nav-itemspan">
         <a class="nav-link" href="#"><p style="font-size:14px; margin-top:0px; color: #bfbfbf;">Today's deals</p></a>
       </li>
       <li class="nav-item nav-itemspan">
         <a class="nav-link" href="#"><p style="font-size:14px; margin-top:0px; color: #bfbfbf;">Best sellers</p></a>
       </li>
       <li class="nav-item nav-itemspan">
         <a class="nav-link" href="#"><p style="font-size:14px; margin-top:0px; color: #bfbfbf;">Mobiles</p></a>
       </li>
       <li class="nav-item nav-itemspan">
         <a class="nav-link" href="#"><p style="font-size:14px; margin-top:0px; color: #bfbfbf;">Today's deals</p></a>
       </li>
       <li class="nav-item nav-itemspan">
         <a class="nav-link" href="#"><p style="font-size:14px; margin-top:0px; color: #bfbfbf;">Best sellers</p></a>
       </li>
       <li class="nav-item nav-itemspan">
         <a class="nav-link" href="#"><p style="font-size:14px; margin-top:0px; color: #bfbfbf;">Mobiles</p></a>
       </li>
       <li class="nav-item nav-itemspan">
         <a class="nav-link" href="#"><p style="font-size:14px; margin-top:0px; color: #bfbfbf;">Today's deals</p></a>
       </li>
       <li class="nav-item nav-itemspan">
         <a class="nav-link" href="#"><p style="font-size:14px; margin-top:0px; color: #bfbfbf;">Best sellers</p></a>
       </li>
     </ul>

     <ul class="navbar-nav ml-auto">
         <img src="img/jackpot.jpg" style="position:relative; left:35px;">
     </ul>
   </div>
 </nav>

轮播：

  <div id="carouselExampleControls" class="carousel slide" data-ride="carousel">
      <div class="carousel-inner" style="position:relative; bottom:10px;">
        <div class="carousel-item active">
          <img src="https://via.placeholder.com/1500x690" class="d-block w-690" alt="...">
        </div>
        <div class="carousel-item">
          <img src="https://via.placeholder.com/1500x690" class="d-block w-690" alt="...">
        </div>
        <div class="carousel-item">
          <img src="https://via.placeholder.com/1500x690" class="d-block w-690" alt="...">
        </div>
      </div>
      <a class="carousel-control-prev" href="#carouselExampleControls" 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="#carouselExampleControls" role="button" data-slide="next">
        <span class="carousel-control-next-icon" aria-hidden="true"></span>
        <span class="sr-only">Next</span>
      </a>
    </div>

此外，自定义轮播CSS：

.carousel-inner img {
  margin: auto;
}

.carousel-control-prev {
  margin-left: 80px;
}

.carousel-control-next {
  margin-right: 80px;
}

1 个答案:

答案 0 :(得分：0)

我找到了解决方案。我不强烈建议使用它，它的速度要快一些，但是如果您像我这样处于紧要关头，则应该使用它。使用width：以及响应式视图所需的尺寸，并在尺寸后加上！important;

相关问题
最新问题