xs modundayken twitter bootstrap metin merkezi

Ben html var: -

<div class="container"> <div class="row"> <div class="col-xs-12 col-sm-6 text-left">

© 2015 example.com. All rights reserved.

</div> <div class="col-xs-12 col-sm-6 text-right">

</div> </div> </div>
 

Koddan, sütunun metninin sırasıyla sola ve sağa hizalandığını görebilirsiniz. Ancak xs modunda onların merkez hizada olmasını seviyorum. Bunu twitter bootstrap kullanarak nasıl yapabilirim?

25
katma yazar user770, kaynak

7 cevap

Bootstrap V4'te duyarlı metin hizalaması eklendi:

https://getbootstrap.com/docs/4.0/utilities/text/#text -alignment

Sol, sağ ve merkez hizalama için, ızgara sistemiyle aynı görünüm limanı genişlik sınır değerlerini kullanan duyarlı sınıflar kullanılabilir.


Left aligned text on viewports sized SM (small) or wider.

28
katma

Bunun için önyükleme içine yerleştirilmiş hiçbir şey yok, ancak bazı basit CSS düzeltebilir. Böyle bir şey çalışması gerekir. Yine de test edilmedi

 @media (max-width: 768px) {
      .col-xs-12.text-right, .col-xs-12.text-left {
              text-align: center;
       } 
    }
19
katma
Bootstrap'in solda bıraktığı gibi çalışmak için bu düzeltmenin önemli olduğunu eklemek zorunda kaldım!
katma yazar Guney Ozsan, kaynak
@media (max-width: 767px) {
    footer .text-right, 
    footer .text-left {
        text-align: center;
    } 
}

@ Loddn'in yanıtını güncelleyerek iki değişiklik yaptım

  • max-width of xs screens in bootstrap is 767px (768px is the start of sm screens)
  • (this one is a matter of preference) I used footer instead of col-* so that if the column widths change, the CSS doesn't need to be updated.
13
katma

Css Bölüm:

CSS:

@media (max-width: 767px) {

 //Align text to center.
  .text-xs-center {
    text-align: center;
  } 
}

Ve HTML kısmı olacaktır (bu metin merkezi yalnızca 767 piksel genişliğin altında çalışır)

HTML:

 <div class="col-xs-12 col-sm-6 text-right text-xs-center">
        


</div>
10
katma
Bu, mevcut sınıfları hacklemeyen, ancak yeni ve anlamlı bir cevap ekleyen en şık cevaptır.
katma yazar Zoltán Tamási, kaynak
Bu kötü bir cevap. Bootstrap mobil ilk prensibi kullanır. Maksimum genişliğe sahip bir medya sorgusu bu basit prensibi izlemez. Bir metin-sm-sağ kombinasyonu ile metin-merkezi gibi bir şey olmalıdır. Her zaman metin merkezi ve sm cihazlarından doğru konum
katma yazar Jasper Seinhorst, kaynak

Boşluklar ve metin uyumu için bs3-upgrade kütüphanesini kullanın ...

https://github.com/studija/bs3-upgrade

sütun-xs-metin-merkezi col-sm-metin-solu

     

col-xs-metin merkezi-col-sm-metin-sağı

<div class="container">
    <div class="row">
        <div class="col-xs-12 col-sm-6 col-xs-text-center col-sm-text-left">
            
© 2015 example.com. All rights reserved.

</div> <div class="col-xs-12 col-sm-6 col-xs-text-center col-sm-text-right">


</div> </div> </div>
1
katma

html

<div class="text-lg-right text-center">
  center in xs and right in lg devices
</div>
1
katma
Lütfen bir açıklama ekleyin.
katma yazar petezurich, kaynak
text-lg-right yalnızca büyük cihazda geçerlidir; bu nedenle büyük cihaz metin merkezi uygulanır. @petezurich
katma yazar prakash, kaynak

Bu bir bootstrap 3 olarak etiketlendi, ancak belki bu yardımcı olacaktır: Bootstrap 4.0.0'da (beta olmayan): Col sınıfının içinde, kullan

<div class="col text-center text-md-left">

"text-center" centers the text for all window sizes, then adding the "text-md-left" or "text-md-right" to change it above sm. You could make it "text-sm-left", "text-lg-left" or whatever. But having it set to center always first sets up it up.

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<link href="//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css" rel="stylesheet">
<body>
<div class="container"> <div class="row"> <div class="col-xs-12 col-sm-6 text-center text-md-left">

© 2015 example.com. All rights reserved.

</div> <div class="col-xs-12 col-sm-6 text-center text-md-right">

</div> </div> </div>
 
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
</body>
0
katma