Wie man einen Teil der Kopfzeile nach rechts richtet, mit Hilfe von Bootstrap

Ich habe versucht, eine Lösung zu finden, aber nichts hat so funktioniert, wie ich wollte. Ich beginne mit Bootstrap und ich könnte etwas verpasst haben.Wie man einen Teil der Kopfzeile nach rechts richtet, mit Hilfe von Bootstrap

Derzeit habe ich den folgenden Code (Beispielcode here), die

Kopf für große Bildschirme

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

-Header für mobile Bildschirme likede diesem arbeitete

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

I möchte die Kopfzeile für große Bildschirme so aussehen:

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

und der Header für mobile Bildschirme sollte wie folgt sein:

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

Dank für jeden Hinweis oder Antworten.

Quelle

2016-04-05 P.Milan

teilen Sie aktuellen Code –

Es ist in Link "hier" –

Sie müssen plätschern, um zu sehen, was passiert, wenn Ihr Bildschirm klein ist col-xs-X (Handy), Medium col-md-X (Tablet) oder groß col-lg-X (Desktop). Sie richten nur ein Raster für den Desktop ein, aber was ist, wenn der Benutzer auf seinem Handy ist?

Ein besserer Weg, um dies zu nähern ist eine mobile erste Ansatz, so dass Sie Ihre Leinwand (wie eine Website ist nur ein Gemälde) erweitern und mehr Kontrolle über das, was auf Ihrer Seite passiert.

Here's a JSFiddle zu sehen, was Sie wollten.

Um zu bekommen, was Sie wollen, sollten die Elemente mit der gleichen Länge auf mobilen angezeigt werden (daher die gleiche col-xs-12 für linken Bereich und rechten Bereich). Beachten Sie den Unterschied auf dem Tablet: col-md-8 und col-md-4. Ich hoffe, dass Sie damit beginnen, mehr über Grid-Templating in Bootstrap zu lernen.

Quelle

2016-04-05 10:19:23 Roy

Vielen Dank. Das ist fast in Ordnung. Haben Sie eine Idee, warum der Sprachteil nicht wie der Login-Teil auf der rechten Seite ausgerichtet ist (Text)? https://jsfiddle.net/Pmilan/441u5763/7/ –

@P.Milan Da Sie Englisch und Deutsch in '.col-sm-3' setzen, sind sie drin. Entfernen Sie sie und verwenden Sie zum Beispiel eine Liste, siehe dieses JSFiddle: https://jsfiddle.net/f86wmtxv/ – Roy

OK, ich könnte dies vorher tun. Ich möchte fragen, gibt es die Lösung im Bootstrap. Offensichtlich nicht. Danke für die schnelle Antwort. –

Es gibt zwei mögliche Lösungen: Sie können versuchen, alles in nur einem row -div und anderen col-push s und col-pull s für verschiedene Größen zu arbeiten. Da dies könnte wirklich chaotisch, empfehle ich nur mit visible

<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">...

Hier ist die Geige: ein bisschen mehr in Grid Template for Bootstrap zum https://jsfiddle.net/gkzfkggn/

Quelle

2016-04-05 10:19:11 Arerrac

Wie man einen Teil der Kopfzeile nach rechts richtet, mit Hilfe von Bootstrap

Antwort

Verwandte Themen