在引導傳送帶中，如何刪除圖像和.carousel div之間的空格？

圖像右側有灰色區域（圖像下方顯示）。如果我將圖像置於旋轉木馬內部，灰色區域會左右平均分割。有沒有一種方法可以消除這一點，並使旋轉木馬的大小與圖像相同。在引導傳送帶中，如何刪除圖像和.carousel div之間的空格？

<!DOCTYPE html> 
 
<html> 
 

 
<head> 
 
    <title>Test</title> 
 

 
    <!-- Latest compiled and minified CSS --> 
 
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> 
 

 
    <!-- jQuery library --> 
 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> 
 

 
    <!-- Latest compiled JavaScript --> 
 
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
 

 
    <style> 
 
     .item { 
 
      max-height: 400px; 
 
     } 
 

 
    </style> 
 
</head> 
 

 
<body> 
 
    <!------------nav bar ----------------------> 
 
    <nav class="navbar navbar-default"> 
 
     <div class="container-fluid"> 
 
      <div class="navbar-header"> 
 
       <a class="navbar-brand" href="#">HOME</a> 
 
      </div> 
 
      <ul class="nav navbar-nav"> 
 
       <li><a href="#">GALLERY</a></li> 
 
       <li><a href="#">REFERENCES</a></li> 
 
      </ul> 
 
     </div> 
 
    </nav> 
 

 

 
    <!--------------Centering div ---------------> 
 
    <div class="container-fluid"> 
 
     <div class="row"> 
 
      <div class="col-md-offset-1 col-md-10"> 
 
       <div id="myCarousel" class="carousel slide" data-ride="carousel"> 
 
        <!-- Indicators --> 
 
        <ol class="carousel-indicators"> 
 
         <li data-target="#myCarousel" data-slide-to="0" class="active"></li> 
 
         <li data-target="#myCarousel" data-slide-to="1"></li> 
 
         <li data-target="#myCarousel" data-slide-to="2"></li> 
 
        </ol> 
 

 
        <!-- Wrapper for slides --> 
 
        <div class="carousel-inner"> 
 
         <div class="item active"> 
 
          <img src="http://res.cloudinary.com/dstd7egax/image/upload/v1497784186/davinciSelf_lma2vh.jpg"> 
 
         </div> 
 

 
         <div class="item"> 
 
          <img class src="http://res.cloudinary.com/dstd7egax/image/upload/v1497784193/Madonna_i9fj4t.png" alt="Chicago"> 
 
         </div> 
 

 
         <div class="item"> 
 
          <img src="http://res.cloudinary.com/dstd7egax/image/upload/v1497784183/davinciSketch_zs4fv5.jpg" alt="New York"> 
 
         </div> 
 
        </div> 
 

 
        <!-- Left and right controls --> 
 
        <a class="left carousel-control" href="#myCarousel" data-slide="prev"> 
 
         <span class="glyphicon glyphicon-chevron-left"></span> 
 
         <span class="sr-only">Previous</span> 
 
        </a> 
 
        <a class="right carousel-control" href="#myCarousel" data-slide="next"> 
 
         <span class="glyphicon glyphicon-chevron-right"></span> 
 
         <span class="sr-only">Next</span> 
 
        </a> 
 
       </div> 
 

 

 
      </div> 
 

 
     </div> 
 

 
    </div> 
 

 
</body> 
 

 
</html>

的額外空間

來源

2017-06-18 Enzio

根據您的圖片是800像素寬，這條規則修復

#myCarousel { 
    margin: 0 auto; 
    max-width: 800px; 
}

棧片斷

<!DOCTYPE html> 
 
<html> 
 

 
<head> 
 
    <title>Test</title> 
 

 
    <!-- Latest compiled and minified CSS --> 
 
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> 
 

 
    <!-- jQuery library --> 
 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> 
 

 
    <!-- Latest compiled JavaScript --> 
 
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
 

 
    <style> 
 
     .item { 
 
      max-height: 400px; 
 
     } 
 
     #myCarousel { 
 
      margin: 0 auto; 
 
      max-width: 800px; 
 
     } 
 

 
    </style> 
 
</head> 
 

 
<body> 
 
    <!------------nav bar ----------------------> 
 
    <nav class="navbar navbar-default"> 
 
     <div class="container-fluid"> 
 
      <div class="navbar-header"> 
 
       <a class="navbar-brand" href="#">HOME</a> 
 
      </div> 
 
      <ul class="nav navbar-nav"> 
 
       <li><a href="#">GALLERY</a></li> 
 
       <li><a href="#">REFERENCES</a></li> 
 
      </ul> 
 
     </div> 
 
    </nav> 
 

 

 
    <!--------------Centering div ---------------> 
 
    <div class="container-fluid"> 
 
     <div class="row"> 
 
      <div class="col-md-offset-1 col-md-10"> 
 
       <div id="myCarousel" class="carousel slide" data-ride="carousel"> 
 
        <!-- Indicators --> 
 
        <ol class="carousel-indicators"> 
 
         <li data-target="#myCarousel" data-slide-to="0" class="active"></li> 
 
         <li data-target="#myCarousel" data-slide-to="1"></li> 
 
         <li data-target="#myCarousel" data-slide-to="2"></li> 
 
        </ol> 
 

 
        <!-- Wrapper for slides --> 
 
        <div class="carousel-inner"> 
 
         <div class="item active"> 
 
          <img src="http://res.cloudinary.com/dstd7egax/image/upload/v1497784186/davinciSelf_lma2vh.jpg"> 
 
         </div> 
 

 
         <div class="item"> 
 
          <img class src="http://res.cloudinary.com/dstd7egax/image/upload/v1497784193/Madonna_i9fj4t.png" alt="Chicago"> 
 
         </div> 
 

 
         <div class="item"> 
 
          <img src="http://res.cloudinary.com/dstd7egax/image/upload/v1497784183/davinciSketch_zs4fv5.jpg" alt="New York"> 
 
         </div> 
 
        </div> 
 

 
        <!-- Left and right controls --> 
 
        <a class="left carousel-control" href="#myCarousel" data-slide="prev"> 
 
         <span class="glyphicon glyphicon-chevron-left"></span> 
 
         <span class="sr-only">Previous</span> 
 
        </a> 
 
        <a class="right carousel-control" href="#myCarousel" data-slide="next"> 
 
         <span class="glyphicon glyphicon-chevron-right"></span> 
 
         <span class="sr-only">Next</span> 
 
        </a> 
 
       </div> 
 

 

 
      </div> 
 

 
     </div> 
 

 
    </div> 
 

 
</body> 
 

 
</html>

來源

2017-06-18 11:40:24 LGSon

謝謝。這解決了它。 – Enzio

@Enzio不客氣。不要忘記也接受我的答案。現在，當你有代表時，一個upvote會很好。去做吧：） – LGSon

一個速戰速決，添加此CSS：

.carousel-control.right, 
.carousel-control.left { 
    background: transparent!important; 
}

中的灰色區域是背景顏色控制按鈕。即使圖像左對齊，它仍然存在，這很難看。

檢查here

來源

2017-06-18 11:45:20 jack

在引導傳送帶中，如何刪除圖像和.carousel div之間的空格？

回答

相關問題