个人中心
gpt4 book ai didi

javascript - 我如何居中 Bootstrap 的轮播？不是图片，是轮播本身

转载 作者：行者123 更新时间：2023-11-28 15:57:44 24 4
gpt4 key购买 nike

由于图片大小不同，我的图片高度和宽度都已设定，那么如何让轮播本身居中？

老实说，我不知道从哪里开始，因为我不知道如何在不搞砸 bootstrap 样式的情况下开始。任何帮助将不胜感激。

Example

HTML

<!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">

<title>Balloons Flowers and Gifts</title>

<link rel="stylesheet" type="text/css" href="css/bfg.css">
<link href="css/bootstrap.min.css" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=News+Cycle" type="text/css" rel="stylesheet">

<!-- Spent two hours trying to figure out why my customized CSS wouldn't load in, then realized that I put it in front of bootstrap... -->
 <script src="https://use.fontawesome.com/7a267289ed.js"></script>
<link rel="stylesheet" type="text/css" href="css/bfg.css">

<link rel="icon" href="img/icon.png">

</head>
<body>
<div class="container-fluid main-section">
<nav class=" navbar navbar-default">
  <div class="container-fluid col-md-12 col-xs-12">
    <div class="headers-bfg">
        <div class="navbar-header">
            <a class="navbar-brand" href="#">BFG</a>
        </div>
            <div class="navbar-header">
        <a class="navbar-brand col-xs-2" href="#"><i class="fa fa-heart" aria-hidden="true"></i></a>
        </div>
      </div>
    <ul class=" nav navbar-nav ">
      <li><a href="#">Balloons</a></li>
        <li><i class="fa fa-small fa-circle" aria-hidden="true"></i></li>
      <li><a href="#">Flowers</a></li>
        <li><i class="fa fa-circle" aria-hidden="true"></i></li>
      <li><a href="#">Gifts</a></li>
        <li><i class="fa fa-circle" aria-hidden="true"></i></li>
      <li><a href="#">Hours</a></li>
    </ul>
  </div>
</nav>
<div class="">
  <div class="row">
    <div class="col-md-12 col-xs-12 text-center main">
      <h1>Balloons Flowers and Gifts</h1>
      <h3>The perfect way to brighten someone's day, and make them smile!</h3>
    </div>
  </div>
</div>
</div>
<div class="container-fluid">
<div class="row">
  <div class="col-md-12 col-xs-12 text-center info-panel balloon-sect">
    <a href="#"><h2>Balloons</h2></a>
    <p> Our hand crafted balloon creations are a hit at every paty! We have a wide variety of colored and themed balloons ranging from Pokemon GO to a life sized stormtrooper! We also do balloon arches and towers for events!</p>

    <div id="myCarousel" class="carousel center 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>

      <!-- Wrapper for slides -->
      <div class="carousel-inner" role="listbox">
        <div class="item active">
          <img src="img/f1.jpg" alt="Chania">
        </div>

        <div class="item">
          <img src="img/f2.jpg" alt="Chania">
        </div>

        <div class="item">
         <img src="img/f3.jpg" alt="Flower">
       </div>

        <div class="item">
          <img src="img/f4.jpg" alt="Flower">
        </div>
     </div>

    <!-- 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 class="col-md-12 col-xs-12 text-center info-panel flower-sect">
    <a href="#"><h2>Flowers</h2></a>
    <p>Our Flowers are perfect for any occasion! We have a wide variety all year round, just be sure to call for availability! We can do prom flowers, funeral arrangements, and everything in between!</p>
  </div>
  <div class="col-md-12 col-xs-12 text-center info-panel gift-sect">
    <a href="#"><h2>Gifts</h2></a>
    <p>We have a wide variety of gifts available for purchase that range from wind chimes to <b>Decorative Vases.</b></p>
  </div>
  <div class="col-md-12 col-xs-12 text-center info-panel hour-sect">
    <a href="#"><h2>Hours</h2></a>
  </div>
</div>
</div>




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

CSS

body {
font-family: 'News Cycle', sans-serif;
font-size: 175%;

}

li {
float: right;
text-align: left

}

link {
link
}

a:link {
text-decoration: none;
color: #000000;
}

a:visited {
text-decoration: none;
color: #000000;

}

a:hover {
text-decoration: none;
color: #232323;
}

a:active {
text-decoration: underline;
color: #000000;
}

 .main-section {
background-image: url(../img/back.jpg);
background-size: cover;
height: 1000px;
color: white;


}

.navbar {
position: fixed;
width: 100%;
}

.container-fluid {
padding-left: 0px;
}

.main {
padding: 400px 0px 360px 0px;
text-shadow: 1px black;
}

.nav {
float: right;
text-align: left;
font-size: 20px;
letter-spacing: .5px;
}

.headers-bfg {
padding-left: 35px;
}

.navbar-brand {
font-size: 20px;
letter-spacing: .5px;
 }

h1 {
font-size: 70px;
}

h3 {
font-size: 35px;
}

.fa-circle {
color: gray;
font-size: .4em;
padding-top: 23px
}

.info-panel {
padding: 50px 50px 50px 50px;
}

.balloon-sect {
background-color: skyblue;

}

.flower-sect {
background-color: #f4f6f9;
}

.gift-sect {
background-color: #ce6640;
}

.carousel {
width:640px;
height:360px;
}

#myCarousel {

}

最佳答案

不能 100% 确定这是您想要的，但您可以看一下:http://www.bootply.com/t08I4ieD1s

基本上我所做的就是添加:margin: 0 auto;到 .carousel CSS

.carousel {
    width:640px;
    height:360px;
    margin: 0 auto;
}

并添加:

.carousel-indicators{
    width:auto;
    margin: 0 auto;
}

要在上方和下方添加空间，您需要更改顶部和底部边距。因此，例如您可以执行以下操作:

.carousel {
    width:640px;
    height:360px;
    margin: 100px auto 50px auto;
}

这会在旋转木马上方增加 100 像素，在下方增加 50 像素。在这里阅读:http://www.w3schools.com/cssref/pr_margin.asp获取更多信息。

关于javascript - 我如何居中 Bootstrap 的轮播？不是图片，是轮播本身，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/40751838/

24 4 0
文章推荐： html - 我已经创建了垂直 div，并希望在滚动之前显示每个 div 以填充整个页面
文章推荐： CSS/HTML 动画圆形到方形。哪个属性/属性决定形状？
文章推荐： html - 如何使图像响应高度？
文章推荐： javascript - 为什么这个选择器不起作用(Jquery 和 Asp.net)
行者123
个人简介

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

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