在引導程序中添加一個框在另一個框的頂部

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

在引導程序中添加一個框在另一個框的頂部

回答

相關問題