Themabewertung:
  • 0 Bewertung(en) - 0 im Durchschnitt
  • 1
  • 2
  • 3
  • 4
  • 5
Flexbox mit Bootstrap 3 verwenden
#1
Ab Bootstrap 4 wird das Flexboxmodel unterstützt, um es auch in Boostrap 3 verwenden zu können ist nur ein wenig css nötig.


Demo Flexbox

CSS:
Code:
html,body {
    height:100%;
}
      
.row-flex, .row-flex > div[class*='col-'] {  
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    flex:1 1 auto;
}

.row-flex-wrap {
    -webkit-flex-flow: row wrap;
    align-content: flex-start;
    flex:0;
}

.row-flex > div[class*='col-'], .container-flex > div[class*='col-'] {
     margin:-.2px; /* hack adjust for wrapping */
}

.container-flex > div[class*='col-'] div,.row-flex > div[class*='col-'] div {
    width:100%;
}


.flex-col {
    display: flex;
    display: -webkit-flex;
    flex: 1 100%;
    flex-flow: column nowrap;
}

.flex-grow {
    display: flex;
    -webkit-flex: 2;
    flex: 2;
}

HTML:
Code:
  <div class="row row-flex row-flex-wrap">
    <div class="col-md-3">
      <div class="panel panel-default flex-col">
        <div class="panel-heading">Panel flex-col</div>
        <div class="panel-body flex-grow">
          <p>div class=&quot;col-md-3</p>
          <p>Inhalt - .flex-grow</p>
        </div>
        <div class="panel-footer">Footerbereich</div>
      </div>
    </div>
    <div class="col-md-3">
      <div class="well">
        <p>div class="col-md-3"</p>
        <p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit. </p>
      </div>
    </div>
    <div class="col-md-3">
      <div class="well">
        <p>div class=&quot;col-md-3</p>
        <p>Duis pharetra varius quam sit amet vulputate. </p>
      </div>
    </div>
    <div class="col-md-3">
      <div class="well">
        <p>div class="col-md-3"</p>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis pharetra varius quam sit amet vulputate. Quisque mauris augue, molestie tincidunt condimentum vitae, gravida a libero. Aenean sit amet felis dolor, in sagittis nisi. </p>
      </div>
    </div>
  </div>


Download
Zitieren


Gehe zu:


Benutzer, die gerade dieses Thema anschauen: 2 Gast/Gäste