如何让bootstrap轮播居中

问题描述 投票：0回答：2

美好的一天，我使用 bootstrap 3 并尝试使我的 bootstrap 轮播位于中心。这是我到目前为止尝试过的脚本。

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
  <style>

 .navbar.transparent.navbar-inverse .navbar-inner {
    border-width: 0px;
    -webkit-box-shadow: 0px 0px;
    box-shadow: 0px 0px;
    background-color: rgba(0,0,0,0.0);
    background-image: -webkit-gradient(linear, 50.00% 0.00%, 50.00% 100.00%, color-stop( 0% , rgba(0,0,0,0.00)),color-stop( 100% , rgba(0,0,0,0.00)));
    background-image: -webkit-linear-gradient(270deg,rgba(0,0,0,0.00) 0%,rgba(0,0,0,0.00) 100%);
    background-image: linear-gradient(180deg,rgba(0,0,0,0.00) 0%,rgba(0,0,0,0.00) 100%);
  }
  #Intro {
      display: inline-block;
  }
  #topnavbar {
    top: 20px;
   }

.carousel {
  width:600px;
  height:400px;
}
.carousel-inner > .item > img {
    margin: 0 auto;
}
div.c-wrapper{
    width: 100%; /* for example */
    margin: auto;
}

.carousel-inner > .item > img, 
.carousel-inner > .item > a > img{
width: 100%; /* use this, or not */
margin: auto;
}
.container{
  border: 1px;
}

  </style>
</head>
<body>
   <div class="container" style="border:1px solid #cecece;">

<div id="Intro" class="col-md-offset-5">
  LOGO
</div>

    <nav id="topnavbar" class="navbar transparent">
        <div class="navbar-header">
            <button type="button" data-target="#navbarCollapse" data-toggle="collapse" class="navbar-toggle">
                <span class="sr-only">Toggle navigation</span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
            
        </div>
        <!-- Collection of nav links, forms, and other content for toggling -->
        <div id="navbarCollapse" class="collapse navbar-collapse">
            <ul class="nav navbar-nav">
                <li class="active"><a href="#">Home</a></li>
                <li><a href="#">About Us</a></li>
                <li><a href="#">Product</a></li>
                <li><a href="#">Promo</a></li>
                <li><a href="#">Competition</a></li>
                <li><a href="#">Ladies Room</a></li>
                <li><a href="#">Need Help?</a></li>


            </ul>
          
        </div>
    </nav>
    <div class="c-wrapper">
 <div id="myCarousel" class="carousel slide">
<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>
<!-- Carousel items -->
<div class="carousel-inner">
  <div class="active item">
      <img src="https://dummyimage.com/600x400/000/fff">
  </div>
  <div class="item">
     <img src="http://via.placeholder.com/350x150">
  </div>
  <div class="item"> 
      <img src="http://via.placeholder.com/350x150">
  </div>
</div>
<!-- Carousel nav -->
<a class="carousel-control left" href="#myCarousel" data-slide="prev">&lsaquo;</a>
<a class="carousel-control right" href="#myCarousel" data-slide="next">&rsaquo;</a>
 </div>
</div>

</body>
</html>

但是，我的脚本位于我的旋转木马上方，仍然位于屏幕左侧。然后我尝试用谷歌搜索，我找到了这个

https://stackoverflow.com/questions/19582340/make-bootstraps-carousel-both-center-and-responsive
但仍然没有帮助。有什么解决办法吗？预先感谢，抱歉我的英语不好

css twitter-bootstrap
2个回答
6
投票

您只是缺少一行代码：

.carousel {
  margin: 0 auto;
}

轮播是一个 

<div>
，它是一个 块级元素，因此您可以通过将水平边距设置为 
auto
来将其居中。简写 
margin: 0 auto
将顶部和底部边距设置为 
0
，同时将水平边距设置为 
auto
。

这是一个工作示例（运行代码片段后单击“完整页面”）：

.navbar.transparent.navbar-inverse .navbar-inner {
  border-width: 0px;
  -webkit-box-shadow: 0px 0px;
  box-shadow: 0px 0px;
  background-color: rgba(0, 0, 0, 0.0);
  background-image: -webkit-gradient(linear, 50.00% 0.00%, 50.00% 100.00%, color-stop( 0%, rgba(0, 0, 0, 0.00)), color-stop( 100%, rgba(0, 0, 0, 0.00)));
  background-image: -webkit-linear-gradient(270deg, rgba(0, 0, 0, 0.00) 0%, rgba(0, 0, 0, 0.00) 100%);
  background-image: linear-gradient(180deg, rgba(0, 0, 0, 0.00) 0%, rgba(0, 0, 0, 0.00) 100%);
}

#Intro {
  display: inline-block;
}

#topnavbar {
  top: 20px;
}

.carousel {
  width: 600px;
  height: 400px;
  margin: 0 auto;
}

.carousel-inner>.item>img {
  margin: 0 auto;
}

div.c-wrapper {
  width: 100%;
  /* for example */
  margin: auto;
}

.carousel-inner>.item>img,
.carousel-inner>.item>a>img {
  width: 100%;
  /* use this, or not */
  margin: auto;
}

.container {
  border: 1px;
}
<!DOCTYPE html>
<html lang="en">

<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>

<body>
  <div class="container" style="border:1px solid #cecece;">
    <div id="Intro" class="col-md-offset-5">
      LOGO
    </div>
    <nav id="topnavbar" class="navbar transparent">
      <div class="navbar-header">
        <button type="button" data-target="#navbarCollapse" data-toggle="collapse" class="navbar-toggle">
          <span class="sr-only">Toggle navigation</span>
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
           <span class="icon-bar"></span>
        </button>
      </div>
      <!-- Collection of nav links, forms, and other content for toggling -->
      <div id="navbarCollapse" class="collapse navbar-collapse">
        <ul class="nav navbar-nav">
          <li class="active"><a href="#">Home</a></li>
          <li><a href="#">About Us</a></li>
          <li><a href="#">Product</a></li>
          <li><a href="#">Promo</a></li>
          <li><a href="#">Competition</a></li>
          <li><a href="#">Ladies Room</a></li>
          <li><a href="#">Need Help?</a></li>
        </ul>
      </div>
    </nav>
    <div class="c-wrapper">
      <div id="myCarousel" class="carousel slide">
        <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>
        <!-- Carousel items -->
        <div class="carousel-inner">
          <div class="active item">
            <img src="https://dummyimage.com/600x400/000/fff">
          </div>
          <div class="item">
            <img src="http://via.placeholder.com/350x150">
          </div>
          <div class="item">
            <img src="http://via.placeholder.com/350x150">
          </div>
        </div>
        <!-- Carousel nav -->
        <a class="carousel-control left" href="#myCarousel" data-slide="prev">&lsaquo;</a>
        <a class="carousel-control right" href="#myCarousel" data-slide="next">&rsaquo;</a>
      </div>
    </div>
  </div>
</body>

</html>

希望这有帮助！ :)

0
投票

我更改了 CSS 样式如下并为我工作，对此非常陌生，因此可能会导致一些我不知道的错误

和下面的按钮

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.