twitter-bootstrap - 列中的 Bootstrap 轮播

Question

我创建了一个包含 3 列 (3-6-3) 的行，中间列有一个旋转木马。

一切似乎都运行良好，但是，我在中间列的两侧都有不需要的空间。见下文:

http://i.imgur.com/krueO5Z.jpg

如果可能的话，我希望左/右(包含按钮组的列)与轮播齐平。

我的代码如下。顺便说一下，我使用的是默认值(即未更改/未编辑的 bootstrap.css)

<div class="container" style="margin-bottom: 20px">
<div class="row">
    <div class="col-md-3">
        <div class="btn-group-vertical btn-block">
        <button type="button" class="btn btn-primary">Online Payments</button>
        <button type="button" class="btn btn-primary">Helpful Links</button>
        <button type="button" class="btn btn-primary">Meetings</button>
        </div>
    </div>
    <div class="col-md-6">

    <!--beginning of 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>
            <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="http://placehold.it/800x200" alt="Chania">
            </div>

            <div class="item">
              <img src="http://placehold.it/800x200" alt="Chania">
            </div>

            <div class="item">
              <img src="http://placehold.it/800x200" alt="Flower">
            </div>

            <div class="item">
              <img src="http://placehold.it/800x200" 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>

<!--end of carousel-->  

    </div>
    <div class="col-md-3">
        <div class="btn-group-vertical btn-block">
        <button type="button" class="btn btn-primary">Legal Notices</button>
        <button type="button" class="btn btn-primary">Phone Book</button>
        <button type="button" class="btn btn-primary">Contact</button>
        </div>
    </div>
 </div>

感谢您提供的任何帮助。

Answer 1

Bootstrap 列在两侧都有默认的 15px 填充，因此只需为包装三列的容器添加一个类或 id，然后像这样删除填充:

HTML:

    <div class="container" id="carousel-contain" style="margin-bottom: 20px">
        <div class="row">
            <div class="col-md-3 left-col">
        <div class="btn-group-vertical btn-block">
        <button type="button" class="btn btn-primary">Online Payments</button>
        <button type="button" class="btn btn-primary">Helpful Links</button>
        <button type="button" class="btn btn-primary">Meetings</button>
        </div>
    </div>
    <div class="col-md-6">

    <!--beginning of 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>
            <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="http://placehold.it/800x200" alt="Chania">
            </div>

            <div class="item">
              <img src="http://placehold.it/800x200" alt="Chania">
            </div>

            <div class="item">
              <img src="http://placehold.it/800x200" alt="Flower">
            </div>

            <div class="item">
              <img src="http://placehold.it/800x200" 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>

<!--end of carousel-->  

    </div>
    <div class="col-md-3 right-col">
        <div class="btn-group-vertical btn-block">
        <button type="button" class="btn btn-primary">Legal Notices</button>
        <button type="button" class="btn btn-primary">Phone Book</button>
        <button type="button" class="btn btn-primary">Contact</button>
        </div>
    </div>
 </div>

CSS:

#carousel-contain.col-md-3.left-col {
    padding-right:0px;
}
#carousel-contain.col-md-6 {
    padding:0px;
}
#carousel-contain.col-md-3.right-col {
    padding-left:0px;
}