个人中心
gpt4 book ai didi

css - 如何使 Bootstrap 轮播中心

转载 作者：行者123 更新时间：2023-12-04 03:04:25 26 4
gpt4 key购买 nike

美好的一天，我正在使用 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>

但是，我的脚本在我的 Caraousel 上方，仍然在屏幕左侧。然后我尝试用谷歌搜索，我找到了这个 https://stackoverflow.com/questions/19582340/make-bootstraps-carousel-both-center-and-responsive 但仍然没有帮助。任何解决方案？提前致谢，抱歉我的英语不好

最佳答案

您只是缺少一行代码:

.carousel {
  margin: 0 auto;
}

轮播是一个<div> , 这是一个 block-level 元素，因此您可以通过将水平边距设置为 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>

希望对您有所帮助! :)

关于css - 如何使 Bootstrap 轮播中心，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/45873758/

26 4 0
文章推荐： bash - 根据两个标准使用 awk 进行过滤
文章推荐： sass - 在Sass函数中添加两个值将创建 'px'的双实例
文章推荐： compilation - 编译为 LLVM 字节码，然后编译为机器码对速度等有什么影响？
文章推荐： php - 无法解码某些特殊字符
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com