html - Bootstrap 列以适应宽度

Question

我希望这张图片可以帮助我描述我的意思。我想使箭头和框内联而没有右侧的空白空间。你可以注意到最左边的盒子与顶部的白色盒子对齐，这也是我想要在右边实现的。我会附上我的代码，这样你就可以看到我是怎么做到的。

注意:我更新了上面的图片。这 4 个盒子的上方和下方各有一个白色方框。我需要将 eplay 框与其上方和下方的白框对齐。还要将幻灯片放映演示框与其上方和下方的白框对齐。加上均匀的空间和大小。在 eplay 演示、剧院脚本演示和音频语音演示框之后，我需要在它们之间放置一个箭头图像。如下图所示，但需要右侧框与顶部白色框及其下方对齐。

        <!--===================DEMOS ==================-->

    <div class="row">
        <div class="col-sm-12 col-md-12 col-lg-12 container-nopads" style="">

            <div class="col-sm-2 col-md-2 col-lg-2 " >
                <div class="demo-box col-sm-12 col-xs-12" id="demo-pdf">
                    <a href="/versebuster2/eplay/eplay-demo.php" style="text-decoration:none;">
                        <h4><strong>ePlay Demo</strong></h4><br><br><br>
                        <img src="images/hovers/pdf-512.png" >
                    </a>
                </div>
            </div>

            <div class="col-xs-1  col-sm-1 col-lg-1 col-md-1 container-nopads" style="">
                <img src="images/arrow-right.png" class="img-responsive" >
            </div>              

            <div class="col-sm-2 col-md-2 col-lg-2 " >
                <div class="demo-box col-sm-12 col-xs-12" id="demo-doc">
                    <h4><strong>Theatre Script Demo</strong></h4><br><br>
                    <img src="images/hovers/doc-512.png" class="">
                </div>
            </div>

            <div class="col-xs-1  col-sm-1 col-lg-1 col-md-1 container-nopads" style="">
                <img src="images/arrow-right.png" class="img-responsive" >
            </div>              

            <div class="col-sm-2 col-md-2 col-lg-2 " >
                <div class="demo-box col-sm-12 col-xs-12" id="demo-mp3">
                    <h4><strong>Audio Speech Demo</strong></h4><br><br>
                    <img src="images/hovers/mp3-512.png" class="">
                </div>
            </div>

            <div class="col-xs-1  col-sm-1 col-lg-1 col-md-1 container-nopads" style="">
                <img src="images/arrow-right.png" class="img-responsive" >
            </div>              

            <div class="col-sm-2 col-md-2 col-lg-2 " >
                <div class="demo-box col-sm-12 col-xs-12" id="demo-pdf">
                    <a href="data/pdf/ePlayPPPDemo.pdf" target="_blank" style="text-decoration:none; ">
                        <h4><strong>Slide Show Demo</strong></h4><br><br><br>
                        <img src="images/hovers/pdf-512.png" class="">
                    </a>
                </div>
            </div>

        </div>
    </div>
    <!--===================END DEMOS ==================-->

Answer 1

在这种情况下使用 .col-md-3 类:

.col-md-3 .inner {margin: 5px; background: #99f; text-align: center;}

<script src="https://code.jquery.com/jquery-1.9.1.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" />
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<div class="row-fluid">
  <div class="container-fluid">
    <div class="col-md-3">
      <div class="inner">One</div>
    </div>
    <div class="col-md-3">
      <div class="inner">Two</div>
    </div>
    <div class="col-md-3">
      <div class="inner">Three</div>
    </div>
    <div class="col-md-3">
      <div class="inner">Four</div>
    </div>
  </div>
</div>

预览: