dikey hizalama bootstrap 3 ile

Dikey olarak iki örneğin div, — JSFiddle link hizalamak istediğimde sorun var 3 ve twitter bootstrap kullanıyorum:

<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">

<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap-theme.min.css">

<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
<div class="row">
  <div class="col-xs-5">
    <div style="height:5em;border:1px solid #000">Big</div>
  </div>
  <div class="col-xs-5">
    <div style="height:3em;border:1px solid #F00">Small</div>
  </div>
</div>

Bootstrap ızgara Sistemi float: left, display:inline-block vertical-align çalışmıyor özelliğini kullanın. margin-top düzeltmeye çalıştım, ama bu duyarlı tasarım için iyi bir çözüm değil bence.

CEVAP

27 AĞUSTOS 2014, ÇARŞAMBA

Esnek kutu yerleşimi

Gelişiyle web tasarımcılar' kabuslar . CSS Flexible Box, birçok ^sup>1çözüldü. En hacky olanlar, dikey hizalama biri. Şimdi mümkün bile değildirbilinmeyen heights.

"Düzen kesmek iki yıl sona eriyor. Belki yarın değil, ama yakında, ve hayatımızın geri kalanı için."

W3Conf 2013 29* * — CSS Efsanevi

Esnek Kutu (veya kısaca) Flexbox, özellikle düzeni amaçlar için tasarlanmış yeni bir düzen sistemidir. Spec states:

Flex düzeni yüzeysel blok düzeni benzer. Birçok yoksun daha karmaşık metin veya kullanılan belge merkezli özellikleri yüzer ve sütun gibi blok düzeni,. Karşılığında basit kazanır şekillerde ve uzay dağıtma ve içeriği hizalamak için güçlü araçlar bu karmaşık web uygulamalarını ve web sayfaları genellikle gerek.

Bu davayı nasıl yardımcı olabilir? Bak sana göstereyim dedim, fazla konuşmaz.

Dikey hizalanmış sütunlar

Twitter kullanan .rows .col-*s sahip olduğumuz bootstrap. Tek yapmamız gereken .row istenen görüntülüyor²flex container kutu flex items (sütunlar) dikey align-items sonra hizalama özelliği.

EXAMPLE HERE(Bakım ile açıklamaları okuyun lütfen

<div class="container">
    <div class="row vertical-align"> <!-- 
                    ^--  Additional class -->
        <div class="col-xs-6"> ... </div>
        <div class="col-xs-6"> ... </div>
    </div>
</div>

.vertical-align {
    display: flex;
    align-items: center;
}

Çıktı

Vertical aligned columns in Twitter Bootstrap

Renkli alan sütun doldurma kutusu görüntüler.

`align-items: center` açıkladığınız

8.3 Cross-axis Alignment: the align-items property

Flex items flex kabın geçerli satırın cross axis justify-content benzer ama dik yönde hizalanmış olabilir. align-items flex konteynerin tüm öğeleri için varsayılan hizalama, anonim flex items dahil olmak üzere ayarlar.

align-items: center;
Merkezi değer, flex item’In boşluğunu kutusu çizgi içinde cross axis içinde ortalanır.

ÖNEMLİ NOT #1:.col-xs-* sınıfların kullanılması önerilir. Aksi takdirde daha düşük ekran boyutlarında bir sorun olabilir.

Alternatif olarak, sadece display: flex; 17* or specifying .vertical-align on specific screen sizes *böyle değiştirerek Flexbox düzeni kapatın.

/* Small devices (tablets, 768px and up) */
@media (min-width: 768px) { 
    .vertical-align {
        display: flex;
        align-items: center;
    }
}

ÖNEMLİ NOT #2:Flexbox sözdizimi sırasında değiştirildi. Yeni yazılı sözdizimi eski (yaşlı olarak 9!) işe yaramaz web tarayıcılarının sürümleri.

Bu da satıcı-öneki display: -webkit-box gibi özellikleri kullanmanız gerektiği anlamına gelir. Eğer tıklatın"Geçiş Derlenmiş Görünüm"Demo CSS bildirimleri öneki sürümü (Autoprefixer Sayesinde) görürsünüz.

Tam yükseklik dikey hizalanmış içeriği ile sütunlar

Artık konteyner (flex konteyner kutu. gibi gibi yüksek ** 47, sütunlar (flex öğeleri) gördüğünüz gibi yani .row element).

Bu align-items center değer özelliğini kullanarak dolayıdır. Varsayılan değer öğeler üst öğe tüm yükseklik doldurun, böylece stretch.

Bunu düzeltmek için, sadece sütun display: flex; kullanabilirsiniz:

EXAMPLE HERE(Yine zihnin yorum)

.vertical-align {
  display: flex;
  flex-direction: row;
}

.vertical-align > [class^="col-"],
.vertical-align > [class*=" col-"] {
  display: flex;
  align-items: center;     /* Align the flex-items vertically */
  justify-content: center; /* Optional, to align inner flex-items 
                              horizontally within the column  */
}

Çıktı

Full-height columns with vertical aligned contents in Twitter Bootstrap

Renkli alan sütun doldurma kutusu görüntüler.

Tarayıcı desteği de dahil olmak üzere daha fazla okumak için, bu kaynaklar yararlı olacaktır:

^{1. Vertically align an image inside a div with responsive height}
^{2. Daha iyi Twitter Bootstrap varsayılan .row değiştirmek için ek bir sınıf kullanmak için.}

Bunu Paylaş: