1. Zuhause
  2. Frage und Antwort
  3. Fügen Sie im Bootstrap eine Box übereinander hinzu

Fügen Sie im Bootstrap eine Box übereinander hinzu

2016-07-22 6 views
0

Ich versuche, 6 Boxen, 2 Boxen in einer Zeile hinzuzufügen. (3 Zeilen und 2 Spalten) Unter Code wird 2 Boxen in einer Spalte und Zeile angezeigt.Fügen Sie im Bootstrap eine Box übereinander hinzu

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

wenn ich diesen Code kopieren und 2 weitere Kisten zu bekommen, es zeigt nicht die unter den ersten 2 Boxen. es wird überlappt.

Es sollte wie

[Desired output[1]

sein Was ich hier fehlt?

Quelle

2016-07-22 PRK

+2

_ „Was ich hier fehlt?“ _ - wie absolute Positionierung funktioniert, vermutlich. – CBroe

+0

Bekam das. Danke CBroe. – PRK

+0

'.panel' wird auch von Bootstrap verwendet, Sie möchten dies möglicherweise nicht überschreiben. – AlexG

Antwort

0

fügen Sie eine weitere "div class =" Zeile "" hinzu. Jede Zeile sollte Ihre 2 Boxen enthalten. Wie folgt aus:

<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>

Quelle

2016-07-22 10:27:17

+0

Danke Andre. Position: absolut; sollte aus CSS entfernt werden. – PRK

+0

das ist ja richtig, neben mehr Zeilen für bessere Syntax. –

0

die Antwort erhielt, position: absolute; sollte aus dem CSS entfernt werden.

Quelle

2016-07-22 10:34:25 PRK

0

sind Ihre Zeilen in einem Container?

und wenn ja, ich denke, die absolute Positionierung auf "Panel" verhindern den Schwimmer.

Sie können schließlich die absolute Positionierung für das übergeordnete Element festlegen.

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

Aber mit Bootstrap, müssen Sie nicht Ihren eigenen Schwimmer für das Layout verwenden, eine Zeile mit,

mit col-md-6 und unter Verwendung von display: block; auf Ihrem Panel-Element sollte genug sein, um zu bekommen, was Sie wollen.

------ ------ Reihe

--col1 - col2--

--col3 - col4--

----- -ROW ------

Quelle

2016-07-22 10:36:10 GaelSa

0

verwenden ...

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

Quelle

2016-07-22 12:14:52

+0

Fügen Sie bootstrap.css hinzu –

Verwandte Themen

 Verwandte Themen