我正在尝试添加6个框,连续2个框(3行2列)
下面的代码将在行和列中显示2个框。

的HTML

<div class="row">
    <div class="col-md-3 col-md-offset-2">
        <div class="panel"> <br> <!--  style="background:#e8e8e8"-->
        <div class="panelTitle"><a href="link1.html">Story</a></div><br>
        <p>
        Text.</p>
        <br>
        </div>
    </div>

    <div class="col-md-3  col-md-offset-1">
        <div class="panel"><br>
        <div class="panelTitle"><a href="Lead.html">Lead</a></div><br>
            <h1>Text</h1>
        </div>
    </div>

</div>


的CSS

.panel{
 position:absolute;
<!--  left:250px; -->
  float:right;
height:350px;
width:380px;
border:2px solid lavender;
background-color: #e8e8e8;
box-shadow: 10px 10px 5px grey;
margin:20px;
}


.panelTitle{
text-align:center;
color:red;
}


当我复制并粘贴此代码以获取更多2个框时,下面的第1个2框未显示。它会重叠。

应该像

[

我在这里想念什么?

最佳答案

添加另一个“ div class =“ row”“。每行应包含2个框。像这样:

    <div class="row">
    <div class="col-md-3 col-md-offset-2">
        <div class="panel"> <br> <!--  style="background:#e8e8e8"-->
        <div class="panelTitle"><a href="link1.html">Story</a></div><br>
        <p>
        Text.</p>
        <br>
        </div>

        <div class="panelTitle"><a href="link1.html">Story</a></div><br>
        <p>
        Text.</p>
        <br>
    </div>
</div>

<div class="row">
    <div class="col-md-3 col-md-offset-2">
        <div class="panel"> <br> <!--  style="background:#e8e8e8"-->
        <div class="panelTitle"><a href="link1.html">Story</a></div><br>
        <p>
        Text.</p>
        <br>
        </div>

        <div class="panelTitle"><a href="link1.html">Story</a></div><br>
        <p>
        Text.</p>
        <br>
    </div>
</div>

<div class="row">
    <div class="col-md-3 col-md-offset-2">
        <div class="panel"> <br> <!--  style="background:#e8e8e8"-->
        <div class="panelTitle"><a href="link1.html">Story</a></div><br>
        <p>
        Text.</p>
        <br>
        </div>

        <div class="panelTitle"><a href="link1.html">Story</a></div><br>
        <p>
        Text.</p>
        <br>
    </div>
</div>

关于html - 在 bootstrap 中的另一个框上添加一个框,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/38523975/

10-09 16:06