Zeigen Bootstrap Wells auf der linken und rechten Seite der Seite

Question

Ich benutze Bootstrap Wells, um Karten ähneln. Ich habe derzeit zwei verschiedene Arten von Karten, die "normalen", die in der Mitte des Bildschirms sind, und die "besonderen", die auf der linken und rechten Seite sein werden.

Vorlage Ich versuche, zu replizieren:

Probleme:

1.) Es scheint, wie die Vertiefungen in Bootstrap nicht wollen, die sehr gehen links oder rechts einer Seite. Sie scheinen immer in einem unsichtbaren div/border enthalten zu sein und werden nirgendwo anders hingehen, wenn keine absolute Positionierung verwendet wird. Ich kann die absolute Positionierung nicht verwenden, da der mittlere Inhalt beim Vergrößern überlagert wird. Dadurch wird der responsive Aspekt des Bootstrap beseitigt, der bleiben muss.

2.) Ohne die Verwendung der absoluten Positionierung, neue „spezielle“ Karten auf der Seite machen werden zusätzlichen vertikalen Raum hinzufügen, die den mittleren Inhalt der Seite nach unten sinken

body { 
 
    background-color: #5C67B6; 
 
} 
 

 
html, 
 
body { 
 
    height: 100%; 
 
    padding-top: 70px; 
 
} 
 

 
.btn-purple { 
 
    color: #fff; 
 
    background-color: #5C67B6; 
 
    border-color: #5C67B6; 
 
    position: absolute; 
 
    bottom: 30px; 
 
    left: 50%; 
 
    margin-left: -140px; 
 
} 
 

 
.btn-info { 
 
    color: #fff; 
 
    background-color: #5C67B6; 
 
    border-color: #5C67B6; 
 
    position: absolute; 
 
    bottom: 30px; 
 
    right: 10%; 
 
    margin-left: 140px; 
 
} 
 

 
.btn-info:hover, 
 
.btn-info:focus, 
 
.btn-info:active, 
 
.btn-info.active, 
 
.open>.dropdown-toggle.btn-info { 
 
    color: #fff; 
 
    background-color: #4b5496; 
 
    border-color: #4b5496; 
 
} 
 

 
.btn-purple:hover, 
 
.btn-purple:focus, 
 
.btn-purple:active, 
 
.btn-purple.active, 
 
.open>.dropdown-toggle.btn-purple { 
 
    color: #fff; 
 
    background-color: #4b5496; 
 
    border-color: #4b5496; 
 
} 
 

 
.customClass { 
 
    width: 700px; 
 
    max-width: 100%; 
 
    margin: 0px auto; 
 
} 
 

 
.turbo { 
 
    background: #7280e5; 
 
    color: white; 
 
    border-color: #4b5496; 
 
} 
 

 
.well { 
 
    min-height: 320px; 
 
    max-height: 320px; 
 
    height: auto; 
 
    overflow-wrap: break-word; 
 
    word-wrap: break-word; 
 
    hyphens: auto; 
 
} 
 

 
.well:hover { 
 
    background: #7280e5; 
 
    color: white; 
 
    border-color: #4b5496; 
 
} 
 

 
.well p { 
 
    margin-bottom: 50px; 
 
} 
 

 
.header { 
 
    display: inline-block; 
 
    width: 100%; 
 
    border: 1px solid red; 
 
} 
 

 
.playerOne { 
 
    float: right; 
 
    text-align: center; 
 
    width: 300px; 
 
    border: 5px solid #dadada; 
 
    background-color: #dadada; 
 
    border-radius: 5px; 
 
    -webkit-border-radius: 4px; 
 
    -moz-border-radius: 4px; 
 
    border-radius: 4px; 
 
    -webkit-box-shadow: 0px 0px 15px #5dbcd2; 
 
    -moz-box-shadow: 0px 0px 15px #5dbcd2; 
 
    box-shadow: 0px 0px 15px #5dbcd2; 
 
} 
 

 
.playerTwo { 
 
    float: left; 
 
    text-align: center; 
 
    width: 300px; 
 
    border: 5px solid #dadada; 
 
    background-color: #dadada; 
 
    border-radius: 5px; 
 
    -webkit-border-radius: 4px; 
 
    -moz-border-radius: 4px; 
 
    border-radius: 4px; 
 
    -webkit-box-shadow: 0px 0px 15px #5dbcd2; 
 
    -moz-box-shadow: 0px 0px 15px #5dbcd2; 
 
    box-shadow: 0px 0px 15px #5dbcd2; 
 
} 
 

 
@media only screen and (max-width: 900px) { 
 
    .playerOne { 
 
    width: 650px; 
 
    } 
 
    .playerTwo { 
 
    width: 633px; 
 
    } 
 
}

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" /> 
 
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" /> 
 
<div class="header"> 
 
    <div class="playerOne"> 
 
    Special Cards 
 
    </div> 
 
    <div class="playerTwo"> 
 
    Special Cards 
 
    </div> 
 
</div> 
 

 
<center> 
 
    <div class="input-group" style="width: 500px; padding-bottom: 2cm;"> 
 
    <input type="text" class="form-control" placeholder="Search cards!"> 
 
    <span class="input-group-btn"> 
 
     <button class="btn btn-default" type="button">Go!</button> 
 
     </span> 
 
    </div> 
 
    <!-- /input-group --> 
 
</center> 
 
<div class="content"> 
 
    <div class="container content-sm customClass"> 
 
    <div class="row"> 
 
     <center> 
 
     <nav aria-label="Page navigation"> 
 
      <ul class="pagination"> 
 
      <li> 
 
       <a aria-label="Previous" href="#"><span aria-hidden="true">&laquo;</span></a> 
 
      </li> 
 
      <li class="active"> 
 
       <a href="#">1</a> 
 
      </li> 
 
      <li> 
 
       <a href="#">2</a> 
 
      </li> 
 
      <li> 
 
       <a href="#">3</a> 
 
      </li> 
 
      <li> 
 
       <a href="#">4</a> 
 
      </li> 
 
      <li> 
 
       <a href="#">5</a> 
 
      </li> 
 
      <li> 
 
       <a aria-label="Next" href="#"><span aria-hidden="true">&raquo;</span></a> 
 
      </li> 
 
      </ul> 
 
     </nav> 
 
     </center> 
 
     <div class="col-sm-6 col-xs-12"> 
 
     <div class="well"> 
 
      <img class="center-block" src="https://cdn.sstatic.net/Sites/stackoverflow/img/apple-touch-icon@2.png" style="border-radius: 50%;" height="80" width="80"> 
 
      <h3 style="text-align: center;">Card</h3> 
 
      <p>This is Text. This is Text. This is Text. </p> 
 
      <a href="#" class="btn btn-purple btn-sm"><i class="fa fa-sign-in" aria-hidden="true"></i> Button!</a> 
 
      <a href="#" class="btn btn-info btn-sm"><i class="fa fa-info-circle" aria-hidden="true"></i> Button!</a> 
 
     </div> 
 
     </div> 
 
     <div class="col-sm-6 col-xs-12"> 
 
     <div class="well"> 
 
      <img class="center-block" src="https://cdn.sstatic.net/Sites/stackoverflow/img/apple-touch-icon@2.png" style="border-radius: 50%;" height="80" width="80"> 
 
      <h3 style="text-align: center;">Card</h3> 
 
      <p>This is Text. This is Text. This is Text. This is Text. This is Text. This is Text. This is Text. </p> 
 
      <a href="#" class="btn btn-purple btn-sm"><i class="fa fa-sign-in" aria-hidden="true"></i> Button!</a> 
 
      <a href="#" class="btn btn-info btn-sm"><i class="fa fa-info-circle" aria-hidden="true"></i> Button!</a> 
 
     </div> 
 
     </div> 
 
     <div class="col-sm-6 col-xs-12"> 
 
     <div class="well turbo"> 
 
      <img class="center-block" src="https://cdn.sstatic.net/Sites/stackoverflow/img/apple-touch-icon@2.png" style="border-radius: 50%;" height="80" width="80"> 
 
      <h3 style="text-align: center;">Card</h3> 
 
      <p>This is Text. This is Text. This is Text. </p> 
 
      <a href="#" class="btn btn-purple btn-sm"><i class="fa fa-sign-in" aria-hidden="true"></i> Button!</a> 
 
      <a href="#" class="btn btn-info btn-sm"><i class="fa fa-info-circle" aria-hidden="true"></i> Button!</a> 
 
     </div> 
 
     </div> 
 
     <div class="col-sm-6 col-xs-12"> 
 
     <div class="well"> 
 
      <img class="center-block" src="https://cdn.sstatic.net/Sites/stackoverflow/img/apple-touch-icon@2.png" style="border-radius: 50%;" height="80" width="80"> 
 
      <h3 style="text-align: center;">Card</h3> 
 
      <p>This is Text. This is Text. This is Text. </p> 
 
      <a href="#" class="btn btn-purple btn-sm" style="vertical-align: bottom;"><i class="fa fa-sign-in" aria-hidden="true"></i> Button!</a> 
 
      <a href="#" class="btn btn-info btn-sm"><i class="fa fa-info-circle" aria-hidden="true"></i> Button!</a> 
 
     </div> 
 
     </div> 
 
     <div class="col-sm-6 col-xs-12"> 
 
     <div class="well"> 
 
      <img class="center-block" src="https://cdn.sstatic.net/Sites/stackoverflow/img/apple-touch-icon@2.png" style="border-radius: 50%;" height="80" width="80"> 
 
      <h3 style="text-align: center;">Card</h3> 
 
      <p>This is Text. This is Text. This is Text. This is Text. </p> 
 
      <a href="#" class="btn btn-purple btn-sm"><i class="fa fa-sign-in" aria-hidden="true"></i> Button!</a> 
 
      <a href="#" class="btn btn-info btn-sm"><i class="fa fa-info-circle" aria-hidden="true"></i> Button</a> 
 
     </div> 
 
     </div> 
 
     <div class="col-sm-6 col-xs-12"> 
 
     <div class="well"> 
 
      <img class="center-block" src="https://cdn.sstatic.net/Sites/stackoverflow/img/apple-touch-icon@2.png" style="border-radius: 50%;" height="80" width="80"> 
 
      <h3 style="text-align: center;">Card</h3> 
 
      <p>This is Text. This is Text. This is Text. This is Text. </p> 
 
      <a href="#" class="btn btn-purple btn-sm"><i class="fa fa-sign-in" aria-hidden="true"></i> Button!</a> 
 
      <a href="#" class="btn btn-info btn-sm"><i class="fa fa-info-circle" aria-hidden="true"></i> Button!</a> 
 
     </div> 
 
     </div> 
 
    </div> 
 
    </div> 
 
</div>

Ich habe versucht, eine Flexbox zu verwenden und die Vertiefungen dort hinein zu setzen, die zu funktionieren schienen, bis ich hineinzoomte und bemerkte, dass es nicht mehr reagierte und den anderen Inhalt überlappte.

Was ist die beste und effizienteste Möglichkeit, Wells auf der linken und rechten Seite der Seite hinzuzufügen, ohne unnötige Leerräume hinzuzufügen und die Reaktionsfähigkeit aufrechtzuerhalten?

Answer 1

Sie können mit folgendem Beispiel versuchen, die gleichen Klassen Verwendung col-xx-offset-xx Bootstrap der

zu bekommen ich gepostet ein funktionierendes Beispiel

Sie können container-fluid anstelle von container.

.box { 
 
    border: 1px solid; 
 
    width: 100%; 
 
    height: 100px; 
 
    margin: 0px 0px 10px 0px; 
 
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" type="text/css" rel="stylesheet"> 
 
<div class="container"> 
 
    <div class="row"> 
 
    <div class="col-lg-2 col-md-2"> 
 
     <div class="box"> 
 
     </div> 
 
    </div> 
 
    <div class="col-lg-4 col-lg-offset-2 col-md-4 col-md-offset-2"> 
 
     <div class="box"> 
 
     </div> 
 
    </div> 
 
    <div class="col-lg-2 col-lg-offset-2 col-md-2 col-md-offset-2"> 
 
     <div class="box"> 
 
     </div> 
 
    </div> 
 
    </div> 
 
    <div class="row"> 
 
    <div class="col-lg-2 col-md-2"> 
 
     <div class="box"> 
 
     </div> 
 
    </div> 
 
    <div class="col-lg-4 col-lg-offset-2 col-md-4 col-md-offset-2"> 
 
     <div class="box"> 
 
     </div> 
 
    </div> 
 
    <div class="col-lg-2 col-lg-offset-2 col-md-2 col-md-offset-2"> 
 
     <div class="box"> 
 
     </div> 
 
    </div> 
 
    </div> 
 
</div>

Working codepen - codepen

Answer 2

Ich habe keine Ahnung, wie es mit festen Größen zu tun, CSS hart ist.

body { 
 
    padding-top: 20px; 
 
}

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" /> 
 
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" /> 
 

 
<div class="container-fluid"> 
 

 
    <div class="row"> 
 
    <div class="col-sm-12"> 
 
     <div class="well">header row</div> 
 
    </div> 
 
    </div> 
 

 
    <div class="row"> 
 
    <div class="col-lg-3"> 
 
     <div class="well">x-well</div> 
 
     <div class="well">x-well</div> 
 
     <div class="well">x-well</div> 
 
     <div class="well">x-well</div> 
 
    </div> 
 
    <div class="col-lg-6"> 
 
     <div class="well"> 
 
     sample text 
 
     </div> 
 
     <div class="row"> 
 
     <div class="col-sm-6"> 
 
      <div class="well">x-well</div> 
 
      <div class="well">x-well</div> 
 
      <div class="well">x-well</div> 
 
      <div class="well">x-well</div> 
 
     </div> 
 
     <div class="col-sm-6"> 
 
      <div class="well">x-well</div> 
 
      <div class="well">x-well</div> 
 
      <div class="well">x-well</div> 
 
      <div class="well">x-well</div> 
 
     </div> 
 
     </div> 
 
    </div> 
 
    <div class="col-lg-3"> 
 
     <div class="well">x-well</div> 
 
     <div class="well">x-well</div> 
 
     <div class="well">x-well</div> 
 
     <div class="well">x-well</div> 
 
    </div> 
 
    </div> 
 
</div>