Twitter bootstrap 列中的引导旋转木马 我创建了一个3列（3-6到3）的行，中间列中有一个转盘。

一切似乎都很好，然而，我有多余的空间在任何一边的中间栏。见下文：

如果可能，我希望左/右（包含按钮组的列）与旋转木马齐平

我的代码如下。顺便说一下，我使用的是默认设置（即unchanged/unedited bootstrap.css）

在线支付
有用的链接
会议




法律声明
电话簿
接触

---

感谢您提供的任何帮助。

引导列的两侧都有默认的15px填充，因此只需为包装这三列的容器添加一个类或id，然后按如下方式删除填充：

HTML:

---

你会注意到，我没有从柱子上移除所有的侧垫。这是为了防止页面对齐中断，因为删除所有侧填充将使特定容器的宽度比页面中的其他div更大。

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

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

#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;
}