Bootstrap，傳送帶切邊

我正在試圖在帶有圓角和邊框周圍陰影的引導中進行幻燈片放映。然而，旋轉木馬的左右邊緣被切斷，我不知道如何修復它。任何幫助表示讚賞。Bootstrap，傳送帶切邊

下面是相關代碼：

 <!DOCTYPE html> 
<html lang="en"> 
    <head> 
    <meta charset="utf-8"> 
    <meta http-equiv="X-UA-Compatible" content="IE=edge"> 
    <meta name="viewport" content="width=device-width, initial-scale=1"> 
    <!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags --> 
    <title>Some Firm</title> 

    <!-- Bootstrap --> 
    <link href="css/bootstrap.min.css" rel="stylesheet"> 
    <!-- jQuery (necessary for Bootstrap's JavaScript plugins) --> 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script> 
    <!-- Include all compiled plugins (below), or include individual files as needed --> 
    <script src="js/bootstrap.min.js"></script> 

    <style> 
    #slideshow { 
     overflow: hidden; 
     margin-top:20px; 
     box-shadow: 0 0 20px rgba(0, 0, 0, .8); 
     -webkit-box-shadow: 0 0 20px rgba(0, 0, 0, .8); 
     -moz-box-shadow: 0 0 20px rgba(0, 0, 0, .8); 
     border-radius: 25px; 

    } 

    </style> 
    <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries --> 
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// --> 
    <!--[if lt IE 9]> 
     <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script> 
     <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script> 
    <![endif]--> 
    </head> 
    <body> 
<div> 
    <div class="row"> 
    <div class="col-md-10 col-md-offset-1" id="slideshow"> 
     <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> 
      <li data-target="#myCarousel" data-slide-to="3"></li> 
     </ol> 
     <center> 
      <!-- Wrapper for slides --> 
      <div class="carousel-inner" role="listbox"> 
      <div class="item active"> 
       <img src="http://placehold.it/1200x600" alt="Chania"> 
      </div> 

      <div class="item"> 
       <img src="http://placehold.it/1200x600" alt="Chania"> 
      </div> 

      <div class="item"> 
       <img src="http://placehold.it/1200x600" alt="Flower"> 
      </div> 

      <div class="item"> 
       <img src="http://placehold.it/1200x600" alt="Flower"> 
      </div> 
      </div> 
     </center> 
     <!-- Left and right controls --> 
     <a class="left carousel-control" href="#myCarousel" role="button" data-slide="prev"> 
      <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span> 
      <span class="sr-only">Previous</span> 
     </a> 
     <a class="right carousel-control" href="#myCarousel" role="button" data-slide="next"> 
      <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span> 
      <span class="sr-only">Next</span> 
     </a> 
     </div> 
    </div> 
    </div> 
</div> 
</body> 
</html>

來源

2016-05-13 limeeattack

添加填充：0;到你的#slideshow css。那是你在找什麼？ –

你說的是盒子裏的白色角落？ –

@JoshSalazar不，不會工作.. –

添加到您的CSS

#slideshow { padding:0;border-radius: 25px; } 
.carousel img { border-radius: 25px; } 
.carousel-control.left, .carousel-control.right { background:transparent; }

Demo here

來源

2016-05-13 12:59:58

好的嘗試，但如果op會左右使用箭頭，那麼奇怪的白色差距就會到來。檢查一下。 –

Bootstrap，傳送帶切邊

回答

相關問題