我正在尝试添加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/