Question

我想添加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个框时，它不显示下面的第2个框。它重叠了。

应该是

[ Desired output[1]

我在这里缺少什么？

Answer 1

添加另一个＆＃34; div class =＆＃34; row＆＃34;＆＃34;。每行应包含您的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>

Answer 2

得到了答案，应从CSS中删除 position：absolute; 。

Answer 3

是容器中的行吗？

<div class="container"></div>

如果是，我认为“面板”上的绝对定位会阻止浮动。

您最终可以在父级上设置绝对定位。

#containerParent{
   position: absolute;
   left: 0;
}

但是使用bootstrap，您不需要使用自己的浮动布局，使用一行，

使用col-md-6并使用display：block;在你的面板元素上应该得到你想要的东西。

------ ------行

- COL1 - COL2 -

- COL3 - COL4 -

------ ------行

Answer 4

使用此...

<强> HTML

<!Doctype html>
<html lang="en">
<head>
    <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
    <link href="css/style.css" rel="stylesheet" />    
    <!--     Fonts     -->
    <link href="http://netdna.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.css" rel="stylesheet">
    <link href='http://fonts.googleapis.com/css?family=Grand+Hotel' rel='stylesheet' type='text/css'>
</head>

<body>


<div class="services">
<div class="container">

<div class="row">
    <div class="col-sm-3">
        <div class="box-sevices">
            <p>
            ambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
            </p>
        </div>
    </div>

    <div class="col-sm-3">
        <div class="box-sevices">

            <p>
            ambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
            </p>
        </div>
    </div>

</div>
<br/>
<div class="row">
    <div class="col-sm-3">
        <div class="box-sevices">
            <p>
            ambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
            </p>
        </div>
    </div>

    <div class="col-sm-3">
        <div class="box-sevices">

            <p>
            ambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
            </p>
        </div>
    </div>

</div>
<br/>
<div class="row">
    <div class="col-sm-3">
        <div class="box-sevices">
            <p>
            ambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
            </p>
        </div>
    </div>

    <div class="col-sm-3">
        <div class="box-sevices">
            <p>
            ambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
            </p>
        </div>
    </div>
</div>
</div>
</div>
</body>  
</html>

<强>的style.css

    body{
        font-family: Segoe UI ;
    }
    .main_header {
        background: rgb(37, 35, 35) none repeat scroll 0 0;
        padding:10px 0;
    }
    .btn.btn-default.btn_more {
        background: rgb(127, 183, 59) none repeat scroll 0 0;
        border: medium none;
        border-radius: 6px;
        color: rgb(255, 255, 255);
        font-size: 16px;
        padding: 4px 25px;
        margin-right:20px;
    }
    .btn.btn-default.btn_info {
        background: rgb(127, 183, 59) none repeat scroll 0 0;
        border: medium none;
        border-radius: 6px;
        color: rgb(255, 255, 255);
        font-size: 16px;
        padding: 4px 10px;
        vertical-align: top;
    }
    .fa_right_padding {
        padding-right: 10px;
        padding-top: 4px;
    }
    .panel_bar {
        background: rgba(0, 0, 0, 0) none repeat scroll 0 0;
        border: medium none;
    }
    .nav.navbar-nav.navbar-right.menu_bar_top {
        margin-top: 30px;
    }
    .nav.navbar-nav.navbar-right.menu_bar_top a {
        color: rgb(0, 0, 0);
        font-size: 16px;
        padding:12px 15px;
    }
    .nav.navbar-nav.navbar-right.menu_bar_top a:hover {
        color: #fff;
        font-size: 16px;
        background-color: rgb(127, 183, 59);
        border-radius:6px;

    }
    a:focus {
        outline: medium none;
        outline-offset: 0;
    }

.left.carousel-control.form_btn {
    background: rgba(0, 0, 0, 0) none repeat scroll 0 0;
    opacity:1;
}
.right.carousel-control.form_btn {
    background: rgba(0, 0, 0, 0) none repeat scroll 0 0;
    opacity:1;
}



.head {
    color: rgb(0, 0, 0);
    font-family: Segoe UI;
    font-weight: bold;
    text-align: center;
}
.head > span {
    color: rgb(82, 133, 43);
}
.phara {
    color: rgb(0, 0, 0);
    font-family: Segoe UI;
    font-size: 20px;
    font-weight: 600;
    margin-top: 20px;
    opacity: 0.7;
    text-align: center;
}
.icon1 {
    margin-right: 20px;
    margin-top: 3px;
    vertical-align: top;
    float:left;
}
.phara1 {
    color: rgb(0, 0, 0);
    display: flex;
    font-size: 16px;
}
.bullet_point {
    padding: 20px 0 10px;
    margin-left:150px;
}
.bullet_point.right {
    padding: 0;
}
.ima_tag {
    padding: 20px 0;
    text-align: center;
}
.box-sevices {
    box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.23);
    height: 100%;
    min-height: 400px;
    padding: 10px;
}
.head2 {
    color: rgb(0, 0, 0);
    font-family: Segoe UI;
    font-size: 21px;
    text-align: center;
}
.box-sevices li a {
    color: rgb(0, 0, 0);
    font-family: Segoe UI;
    font-size: 16px;
    line-height: 30px;
    opacity: 0.8;
}
.box-sevices a:hover {
    color: rgb(127, 183, 59);
    text-decoration: none;
}
.box-sevices > ul {
    padding-left: 25px;
}
.box-sevices > ul {
    padding-left: 25px;
}
.services {
    padding-bottom: 60px;
    padding-top: 30px;
}
.trail_acess_load {
    padding: 15px 0;

}
.head1 {
    font-family: Segoe UI;
    font-size: 30px;
    font-weight: 600;
    margin-bottom: 25px;
}
.icon2 {
    margin-right: 20px;
    vertical-align: middle;
    opacity:0.80;
    margin-top:-6px;
}
.phara2 {
    color: rgb(255, 255, 255);
    display: inline-block;
    font-size: 24px;
}
.trail_acess{
    background: #599425;
}
.phara2 > a {
    color: rgb(255, 255, 255);
}
.footer {
    background: rgb(37, 35, 35) none repeat scroll 0 0;
}
.head3 {
    color: rgb(255, 255, 255);
    font-family: Segoe UI;
    font-size: 21px;
}
.about_us > p {
    color: rgb(255, 255, 255);
    opacity: 0.7;
    font-size:16px;
    margin-bottom:20px;
    }
.about_us > span {
    color: rgb(255, 255, 255);
    font-size:16px;
}

.about_us {
    padding: 30px 10px;
}
.about_us > ul {
    padding-left: 0;
}
.about_us li {
    list-style: outside none none;
}
.about_us a {
    color: rgb(255, 255, 255);
    font-size: 16px;
    opacity: 0.7;
}
.about_us a:hover {
    color: rgb(127, 183, 59);
    text-decoration: none;
    opacity:1;
}
.read {
    color: rgb(255, 255, 255) !important;
    opacity: 1 !important;
}
.read:hover{
    color:rgb(127, 183, 59) !important;
}
.phara3{
    color: rgb(255, 255, 255);
    display: inline-block;
    line-height: 24px;
    opacity: 0.7;
}
.icon3 {
    margin-right: 10px;
    margin-top: 7px;
    vertical-align: top;
}
.icon3.ic1 {
    margin-top: 5px;
}
.icon4:hover {
    animation-duration: 0.5s;
    animation-name: popover-social;
}
@keyframes popover-social {
    0%   {opacity:0.5;}
    99%  {transform:scale(1.7); opacity:0; }
    100% {opacity:1;}
}
.navbar.navbar-default.panel_bar {
    margin-bottom: 5px;
}
.icon4 {
    margin-right: 5px;
}
.link_footer {
    opacity: 1 !important;
}

.phara5 {
    color: rgb(255, 255, 255);
    font-size: 14px;
    opacity: 0.8;
    padding: 10px 0;
    text-align: center;
}
.main_footer {
    background: rgb(58, 56, 56) none repeat scroll 0 0;
}

@media(min-width: 992px) and (max-width: 1200px){
    .box-sevices {
    min-height: 441px;
}
    .bullet_point {
    margin-left: 100px;
}
    .icon1_ic1.img-responsive {
    width: 90%;
}
    .navbar-header.change{
        width:24%;
    }
    .navbar-brand.logo_desing{
        padding:15px 0 ;
    }
    .nav.navbar-nav.navbar-right.menu_bar_top a {
    font-size: 14px;
}
    .nav.navbar-nav.navbar-right.menu_bar_top a:hover {
    font-size: 14px;
}
    .nav.navbar-nav.navbar-right.menu_bar_top {
    margin-top: 26px;
}
    .navbar.navbar-default.panel_bar {
    margin-bottom: 0;
}

}
@media(min-width: 768px) and (max-width: 991px){
    .head2 {
    font-size: 19px;

}
    .box-sevices {
    min-height: 523px;
}
    .head2 {
    margin-top: 0;
}
    .box-sevices li a {
    line-height: 26px;
}
    .bullet_point {
    margin-left: 0;
    padding: 20px 0 10px;
}
    .navbar-brand.logo_desing{
        padding:15px 0 ;
    }
    .icon1_ic1.img-responsive {
    width: 100%;
}
    .navbar-header.change {
    width: 20%;
}
    .nav.navbar-nav.navbar-right.menu_bar_top a {
    font-size: 12px;
    padding: 12px 10px;
}
    .nav.navbar-nav.navbar-right.menu_bar_top a:hover {
    font-size: 12px;
}
    .nav.navbar-nav.navbar-right.menu_bar_top {
    margin-top: 18px;
}
    .navbar.navbar-default.panel_bar {
    margin-bottom: 0;
}

}
@media(max-width: 768px){
    .bullet_point {
    margin-left: 0;
}
    .box-sevices {
    margin-bottom: 30px;
}

.box-sevices {
    max-width: 320px;
    width: 100%;
}

}
@media(min-width: 768px){
    .glyphicon.glyphicon-chevron-right.btn_rounded {
    background: rgb(255, 255, 255) none repeat scroll 0 0;
    border-radius: 30px;
    color: rgb(115, 115, 114);
    font-size: 28px;
    height: 45px;
    opacity: 1;
    padding: 8px;
    width: 45px;
    top: 40%;
}
    .glyphicon.glyphicon-chevron-left.btn_rounded{
    background: rgb(255, 255, 255) none repeat scroll 0 0;
    border-radius: 30px;
    color: rgb(115, 115, 114);
    font-size: 28px;
    height: 45px;
    opacity: 1;
    padding: 8px;
    width: 45px;
    top: 40%;
}
}

在bootstrap中添加一个框在另一个上面

4 个答案: