Bootstrap Carousel 宽度和图片问题

Question

第一次使用引导程序，我的轮播遇到了问题。

当我创建一个轮播时，它会立即填满屏幕的整个宽度。就我而言，我只希望我的轮播从最左侧的主页按钮跨越到第一个右侧登录按钮。

另外，是否可以有一个轮播来适应我的图片？它们的尺寸都是一样的，但无论出于何种原因，我的旋转木马似乎都放大了图片。

我希望有更多经验的人可以指导我进行适当的更改，或提供有关轮播的更多信息。谢谢你

演示：my WIP emulation demo

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，现在已修复。