html - 引导列以适合宽度

我希望这张图片可以帮助我描述我的意思。我想使箭头和框成行，而右边没有可用空间。您会注意到最左边的框在顶部的白色框上被选中，这也是我想要在右边实现的框。我将附加我的代码，以便您可以看到我是如何做到的。

注意：我更新了上面的图像。在这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 ==================-->

最佳答案

在这种情况下，请使用.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>

预习：