在引导程序中添加一个框在另一个框的顶部

我想在一行中添加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]

缺少什么我在这里？

来源

2016-07-22 PRK

_“我缺少的是在这里吗？” _ - 如何绝对定位的作品，大概。 – CBroe

明白了。谢谢CBroe。 – PRK

'.panel'也被引导，你可能不希望覆盖。 – AlexG

添加另一个“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>

来源

2016-07-22 10:27:17

谢谢安德烈。位置：绝对的;应该从CSS中删除。 – PRK

这是正确的，是的，旁边有更好的语法更行。 –

得到了答案， 的位置是：绝对的;应该从CSS中删除。

来源

2016-07-22 10:34:25 PRK

是你在容器中的行吗？

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

，如果是，我想“面板”上的绝对定位防止浮动。

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

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

但随着引导，你不应该需要使用行用自己的浮动的布局，，

与COL-MD-6和使用显示：块;在你的面板元素应该足以得到你想要的。

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

--col1 - col2--

--col3 - col4--

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

来源

2016-07-22 10:36:10 GaelSa

使用此...

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%; 
} 
}

来源

2016-07-22 12:14:52

包括bootstrap.css –

在引导程序中添加一个框在另一个框的顶部

回答

相关问题