Div Erweiterung von links von Bootstraps Container auf der rechten Seite des Bildschirms

Ich habe Probleme, eine Lösung für ein Problem, das ich habe.Div Erweiterung von links von Bootstraps Container auf der rechten Seite des Bildschirms

Was ich versuche zu erreichen, ist ein DIV, der innerhalb Bootstrap ist. Container über die volle Breite auf der rechten Seite des Containers (bis es den Bildschirm trifft), aber innen Container auf der linken Seite.

Beispielcode:

<div class="container"> 
    <div class="extended-div"></div> 
</div>

Ich möchte nur die erweiterte-div links von CONTAINER Element haften, und von dort nach rechts auf dem Bildschirm den ganzen Weg überspannen (Außerhalb des Behälters).

Ich bin ein Beispiel von dem, was ich versuche zu erreichen. Normalerweise, wenn die Box nur BG-Farbe usw. ist, würde ich entweder mit Box-Schatten oder nach Methoden gehen, aber das wird hier nicht funktionieren.

Here's what I'm trying to achieve

Vielen Dank im Voraus!

Quelle

2016-04-16 Karolis

können Sie einen Code hinzufügen, um weitere Informationen hinzufügen? – Maske

Ein Codebeispiel hinzugefügt. – Karolis

Noch nichts beantwortet meine Frage. – Karolis

Try Position absolut zum erweiterten div geben und Sie haben nicht richtig geschlossen Klasse-Tag für Container

<div class="container"> 
<div class="extended-div"></div> 
</div>

Quelle

2016-04-16 13:13:57 user3045179

Noch nichts beantwortet meine Frage. – Karolis

Erste Klasse-Tag für container richtig schließen. Erhöhen Sie die Breite von Child Div wie Sie benötigen.

.container{ 
 
    background-color:red; 
 
    } 
 
.extended-div 
 
{ 
 
    background-color:green; 
 
    width:110%; 
 
    margin-left:20px; 
 
    margin-top:20px; 
 
}

<html> 
 
    <head> 
 
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous"> 
 

 
    <!-- Latest compiled and minified JavaScript --> 
 
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script> 
 
    </head> 
 
    <body> 
 
    <div class="container"> 
 
     <div class="extended-div"> 
 
     <h1> 
 
      jfksdjfksdjfds 
 
     </h1> 
 
     <h1> 
 
      overflow div sssssssssssssssssssddsssssssdddddddddddd 
 
     </h1> 
 

 
     </div> 
 
    </div> 
 
    </body> 
 
</html>

Quelle

2016-04-16 16:45:23

Noch nichts beantwortet meine Frage. – Karolis

Div Erweiterung von links von Bootstraps Container auf der rechten Seite des Bildschirms

Antwort

Verwandte Themen