Question

第一次使用bootstrap并且我的旋转木马遇到了问题。

当我创建旋转木马时，它会立即填满整个屏幕宽度。在我的情况下，我只希望我的旋转木马从最左边的主页按钮跨越到第一个右侧登录按钮。

此外，是否可以设置适合我照片的旋转木马？他们所有相同的尺寸，但无论出于何种原因，我的旋转木马似乎放大了图片。

我希望有更多经验的人可以指导我做出适当的改变，或者提供有关旋转木马的更多信息。谢谢

的CSS：

   /* CUSTOMIZE THE CAROUSEL
-------------------------------------------------- */

/* Carousel base class */
.carousel {
  height: 500px;
  margin-bottom: 60px;
}
/* Since positioning the image, we need to help out the caption */
.carousel-caption {
  z-index: 10;
}

/* Declare heights because of positioning of img element */
.carousel .item {
  height: 500px;
  background-color: #777;
}
.carousel-inner > .item > img {
  position: absolute;
  top: 0;
  left: 0;
  min-width: 100%;
  height: 500px;
}

轮播：

          <!-- Carousel            
================================================== -->
<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>
  </ol>   
  <div class="carousel-inner" role="listbox">
    <div class="item active">
      <img class="first-slide" src="images/service.png" alt="First slide">
      <div class="container">         
        <div class="carousel-caption">
          <h1>Place Holder</h1>
          <p>Place Holder</p>
        </div>
      </div>
    </div>
    <div class="item">
      <img class="second-slide" src="images/classic.png" alt="Second slide"> 
      <div class="container">            
        <div class="carousel-caption">
          <h1>Place Holder</h1>
          <p>Place Holder</p>
        </div>
      </div>
    </div>               
    <div class="item">
      <img class="third-slide" src="images/new2016.png" alt="Third slide">
      <div class="container">           
        <div class="carousel-caption">                
          <h1>PH</h1>
          <p>PH</p>
        </div>
      </div>
    </div>
            <div class="item">
      <img class="second-slide" src="images/a6lease.png" alt="Second slide">
      <div class="container">
        <div class="carousel-caption">
          <h1>PH</h1>                                                                                                                                                                                                               
          <p>PH</p>
        </div>               
      </div>              
    </div>
  </div>                
  <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-s$
    <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></sp$
    <span class="sr-only">Next</span>
  </a>    
</div><!-- /.carousel -->

Answer 1

您可以使用网格系统。将您的轮播放在row内，然后放入跨越您所需宽度的列中，例如col-lg-10并在另一列cl-lg-2中添加您要提及的按钮。

我在http://jsfiddle.net/8rd9tfwf/1/

准备了一个jsFiddle

    <div class="row">
<div class="col-md-10 col-lg-10 col-sm-10">
    <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>
      </ol>   
      <div class="carousel-inner" role="listbox">
        <div class="item active">
          <img class="first-slide" src="images/service.png" alt="First slide">
          <div class="container">         
            <div class="carousel-caption">
              <h1>Place Holder</h1>
              <p>Place Holder</p>
            </div>
          </div>
        </div>
        <div class="item">
          <img class="second-slide" src="images/classic.png" alt="Second slide"> 
          <div class="container">            
            <div class="carousel-caption">
              <h1>Place Holder</h1>
              <p>Place Holder</p>
            </div>
          </div>
        </div>               
        <div class="item">
          <img class="third-slide" src="images/new2016.png" alt="Third slide">
          <div class="container">           
            <div class="carousel-caption">                
              <h1>PH</h1>
              <p>PH</p>
            </div>
          </div>
        </div>
                <div class="item">
          <img class="second-slide" src="images/a6lease.png" alt="Second slide">
          <div class="container">
            <div class="carousel-caption">
              <h1>PH</h1>                                                                                                                                                                                                               
              <p>PH</p>
            </div>               
          </div>              
        </div>
      </div>                
      <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-s$
        <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></sp$
        <span class="sr-only">Next</span>
      </a>    
    </div>

  </div>

  <div class="col-md-2 col-lg-8 col-sm-2"></div>

编辑：更新了jsFiddle。我以前复制了你破碎的HTML，现在已经修复了。

Bootstrap Carousel宽度和图片问题

1 个答案: