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

列中的bootstrap轮播

1 个答案: