Question

我想在页面中间设置我的轮播，并附上白色边框。但我无法做到。我使用了填充，但边框没有用旋转木马进行调整。如果我减少一点填充，那么旋转木马箭头不会随着旋转木马移动。这是我的html文件代码：

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>Carousel Test</title>
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css">
  <link rel="stylesheet" href="css/style.css">
  <script src="js/prefixfree.min.js"></script>
  <meta name="viewport" content="width=device-width, initial-scale=1">
</head>

<body>

<header>

  <nav class="navbar navbar-default navbar-fixed-top" role="navigation">
    <div class="container">
      <div class="navbar-header">
        <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#collapse">
          <span class="sr-only">Toggle navigation</span>
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
        </button>
        <a class="navbar-brand" href="#featured"><h1>Carousel <span class="subhead">Practice</span></h1></a>
      </div><!-- navbar-header -->
      <div class="collapse navbar-collapse" id="collapse">
        <ul class="nav navbar-nav navbar-right">
          <li class="active"><a href="#featured">Home</a></li>
          <li><a href="#mission">Mission</a></li>
          <li><a href="#services">Services</a></li>
          <li><a href="#staff">Staff</a></li>
          <li><a href="#testimonials">Testimonials</a></li>
        </ul>        
      </div><!-- collapse navbar-collapse -->
    </div><!-- container -->
  </nav>

<div class="container wrapping">
  <div class="carousel slide" data-ride="carousel" id="featured">

    <div class="carousel-inner">
      <div class="item active"><img src="images/carousel-lifestyle.jpg" alt="Lifestyle Photo"></div>
      <div class="item"><img src="images/carousel-mission.jpg" alt="Mission"></div>
      <div class="item"><img src="images/carousel-vaccinations.jpg" alt="Vaccinations"></div>
      <div class="item"><img src="images/carousel-fish.jpg" alt="Fish"></div>
      <div class="item"><img src="images/carousel-exoticanimals.jpg" alt="Exotic Animals"></div>      
    </div><!-- carousel-inner -->

    <a class="left carousel-control" href="#featured" role="button" data-slide="prev">
      <span class="glyphicon glyphicon-chevron-left"></span>
    </a>
    <a class="right carousel-control" href="#featured" role="button" data-slide="next">
      <span class="glyphicon glyphicon-chevron-right"></span>
    </a>
    </div>
  </div><!-- featured carousel -->
</header>


<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>
<script src="js/myscript.js"></script>
</body>
</html>

这是我的css：

@import url(http://fonts.googleapis.com/css?family=Open+Sans:400,300,700,800|Roboto+Slab:400,100,300,700);

/**  Basic Page CSS **/
body{
  font-family: "Roboto Slab", sans-serif;
  font-weight: 300;
  font-size: 2em;
  position: relative;
}

h1, h2, h3, h4, h5, h6 {
  font-family: "Open Sans", sans-serif;
  font-weight: 100;
  margin: 0;
}

header{
  background-color: #00173f;  
}

.carousel-inner{
 padding: 150px 30px 100px 30px;
 border: 15px solid #fff; border-radius: 5px;
}


/**  Header Navigation **/

header .navbar {
  padding: 30px 0;
  transition: all .5s ease-out;
}

header .navbar-default {
  background-color: transparent;
  border: none;
}

header .navbar-default .navbar-nav a {
  color: white;
  padding: 5px 8px;
}

header .navbar-default .navbar-nav a:hover {
  color: #EEC856;
}

header .navbar-default .navbar-nav .active a {
  font-weight: 700;
  color: #EEC856;
  background: transparent;
  border-bottom: 4px solid #EEC856;
  text-shadow: none;
}

header .navbar-default .navbar-nav .active a:hover {
  color: #E15D5F;
  background: transparent;
  text-shadow: none;
}

/**  Navbar Brand **/

header .navbar-brand {
  background: url(../images/wisdompetlogo.svg);
  background-repeat: no-repeat;
  background-position: 15px 0;
  height: auto;
}

header .navbar-brand h1 {
  color: white;
  margin: 0;
  font-size: 1.8em;
  font-weight: 400;
  padding-left: 105px;
}

header .navbar-brand span.subhead {
  display: block;
  font-family: "Roboto Slab", serif;
  font-size: .6em;
  font-weight: 100;
}

/**  Navbar Toggle **/
header .navbar-toggle {
  background-color: #279182;
}

header .navbar-default .navbar-toggle .icon-bar {
  background-color: white;
}

@media only screen
and (max-width: 768px) {
  header .navbar-collapse.in {
    background-color: rgba(0,0,0, .5);
  }
}

这是我的图片之一链接：https://www.google.co.in/search?q=wisdom+pet+medicine&espv=2&biw=1280&bih=614&source=lnms&tbm=isch&sa=X&sqi=2&ved=0ahUKEwiejtTiqs7PAhWBPo8KHXsbDlwQ_AUIBigB&dpr=1.5#imgrc=uU4osiOZHZGu9M%3A

Answer 1

我不完全确定你的问题是边界，定位还是两者兼而有之。

您的传送带已包裹在标题中。这可能会阻止它位于页面中间。如果你想让它在它自己的部分，我会把它放在一个容器流体div类中，并根据需要添加样式。

将轮播放在页面中间

1 个答案: