Bootstrap

yardımı ile üstbilginin bir kısmını sağa hizalamak nasıl bir çözüm bulmaya çalıştım, ancak istediğim şekilde çalışmadı. Bootstrap ile başlıyorum ve bir şeyleri kaçırmış olabilirim.Bootstrap

Şu anda, büyük ekranlar mobil ekranlara

|[ Website name ]     | 
|        [log off]| 
|     [[ lang1 ][ lang2 ]]|

|[ Website name ]     | 
|       [log off]| 
|      [[ lan1ang2 ]]|

Üstbilgi bu

üstbilgi likede görev şu kodu (örnek kod here) sahip Büyük ekranların başlığını şöyle görün:

|[ Website name ]   [ log off ]| 
|      [[ lang1 ][ lang2 ]]|

Ve mobil ekranlar için başlık şöyle olmalıdır: Herhangi bir ipucu ya yanıtlar için

|[ Website name ]    | 
|[[ lang1 ][ lang2 ]] [log off]|

teşekkürler.

kaynak

2016-04-05 P.Milan

güncel kodunu paylaşın –

Link ile "here" adresindedir –

col-xs-X (mobil), orta col-md-X (tablet) veya büyük col-lg-X (masaüstü). Masaüstü için yalnızca bir ızgara oluşturuyorsunuz, ancak kullanıcı mobil cihazındaysa ne olacak?

Buna yaklaşmanın daha iyi bir yolu, bir mobil ilk yaklaşımdır, böylece tuvalinizi genişletebilirsiniz (bir web sitesi sadece bir resimdir) ve sayfanızda olup bitenleri daha fazla kontrol edebilirsiniz. Ne istediğinizi görmek için

Here's a JSFiddle.

İstediğiniz şeyi almak için, öğeler mobilde aynı uzunlukta görüntülenmelidir (bu nedenle sol alan ve sağ alan için col-xs-12 eşittir). Tabletteki farka dikkat edin: col-md-8 ve col-md-4. Umarım bu, Bootstrap’te ızgara şablonlama hakkında daha fazla şey öğrenmeye başlar.

kaynak

2016-04-05 10:19:23 Roy

Teşekkür ederiz. Bu neredeyse tamam. Bir bölüm var mı? Neden dil kısmı oturum açma kısmı gibi sağ tarafa hizalanmıyor (metin)? https://jsfiddle.net/Pmilan/441u5763/7/ –

@ P.Milan İngilizce ve Almanca'yı .col-sm-3'e koyduğunuz için oradalar. Bunları kaldırın ve bir liste kullanın, bu JSFiddle'a bakın: https://jsfiddle.net/f86wmtxv/ – Roy

Tamam, bunu daha önce yapabilirdim. Ben bootstrap çözüm var mı sormak istiyorum. Belli ki değil. Hızlı cevap için teşekkürler. –

İki olası çözüm vardır: her biri farklı boyutlarda yalnızca bir row -div ve farklı col-push s ve col-pull s içinde çalışmayı deneyebilirsiniz. Bu yana Sadece Burada

<div class="col-sm-6 namesite"> 
    <h1><a href="/">My website</a></h1> 
</div> 
<div class="col-sm-6 logoff visible-sm visible-lg"> 
    <a href="/" class="pull-right">logoff</a> 
</div> 
... 
<div class="row visible-xs"> 
     <section id="login" class="pur">...

visible keman var kullanılmasını öneriyoruz, gerçekten ortalık karışabilir: Eğer ekran küçük olduğu zaman ne olacağını görmek için Grid Template for Bootstrap daha içinde biraz serpmek gerekir https://jsfiddle.net/gkzfkggn/

kaynak

2016-04-05 10:19:11 Arerrac

cevap

İlgili konular