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课程：

＆＃13;

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

＆＃13;

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

＆＃13;

预览

bootstrap列适合宽度

1 个答案: