Containerausrichtung an den Rand des Browserfensters

Ich habe ein div, das mit dem Browser an die Kante geht und Inhalte hinzufügen möchte, die auf den zentrierten Container in der Mitte der Seite ausgerichtet sind. Ich habe eine Zeile mit einem col-md-6 erstellt, die ich mit einer Hintergrundfarbe gefüllt habe, aber wenn ich den Container hinzufüge, wird der Inhalt an der Kante des Browsers ausgerichtet, nicht an der Kante des Containers.Containerausrichtung an den Rand des Browserfensters

Ich benutze Bootstrap und brauche wirklich deine Hilfe. Wenn ich das Problem nicht richtig artikuliert habe, habe ich ein Bild beigefügt, das helfen sollte.

Danke für Ihre Hilfe.

.login-msg-box { 
 
\t background: rgba(0,0,0,0.5); 
 
\t margin-top: 200px; 
 
\t height: 400px; 
 
}

<div class="row"> 
 
    <div class="col-md-6 login-msg-box"> 
 
     <div class="container"> 
 
      <h2 class="msg-heading-line">LOG IN</h2> 
 
     </div> 
 
    </div> 
 
</div>

Image shows the current situation and the desired situation

Quelle

2016-08-24 NEWWPDEV

Wie Sie eine margin-top für die .login-msg-box tat, sie könnte zum Beispiel ein margin-left zu Ihrem .container hinzuzufügen. Hier ist das Ergebnis:

.login-msg-box { 
 
\t background: rgba(0,0,0,0.5); 
 
\t margin-top: 200px; 
 
\t height: 400px; 
 
} 
 

 
.container { 
 
    margin-left: 200px; 
 
}

<div class="row"> 
 
    <div class="col-md-6 login-msg-box"> 
 
     <div class="container"> 
 
      <h2 class="msg-heading-line">LOG IN</h2> 
 
     </div> 
 
    </div> 
 
</div>

Quelle

2016-08-24 17:07:42

Das Problem mit dieser Option ist, dass ich die Ausrichtung mit anderen Elementen auf der Seite (z. Logo), die alle innerhalb des Standardcontainers ausgerichtet sind. Das Problem mit dem voreingestellten Rand ist, dass ich es auf eine bestimmte Bildschirmgröße ausrichten kann, aber es wäre mit jeder anderen Bildschirmgröße falsch ausgerichtet. – NEWWPDEV

Sie eine beliebige Anzahl von Offset hinzufügen

<div class="row"> 
     <div class="col-md-6 col-md-offset-6 login-msg-box"> 
      <div class="container"> 
        <h2 class="msg-heading-line">LOG IN</h2> 
      </div> 
     </div> 
    </div>

Quelle

2016-08-24 17:10:30 Khurram

Danke, aber das würde den ganzen col auf die andere Seite des Bildschirms schieben, nicht den Container. – NEWWPDEV

Bootstrap-Container hat feste Breite. Sie können die Containerbreite ändern, um Ihr Wunschergebnis zu erzielen. – Khurram

Ich glaube, Sie suchen nach etwas, wie diese https://jsfiddle.net/neya0v76/1/

ich alles div wechseln zu xs so sieht es richtig in der fiddle und nur restrukturiert Ihre html

<div class="row"> 
    <div class="col-xs-6 login-msg-box"> 
    <div class="row"> 
     <div class="col-xs-6"> 
     </div> 
     <div class="col-xs-6"> 

     <h2 class="msg-heading-line">LOG IN</h2> 
     <input type="text"/> 
     <input type="text"/> 
     </div> 
    </div> 
    </div>

Quelle

2016-08-24 17:23:45

Containerausrichtung an den Rand des Browserfensters

Antwort

Verwandte Themen