Bootstrap volle Breite Sidebar mit Hintergrundfarbe

Ich habe das Layout wie this image Bootstrap volle Breite Sidebar mit Hintergrundfarbe

Das Problem? Wie man den vollen breiten violetten Hintergrund auf einem Teil von links macht? Dies ist my code

HTML:

<section id="screens-eight" class="clearfix"> 
    <div class="container"> 
     <div class="row"> 
      <div class="col-md-6 screens-eight-left"> 
       <div class="screens-eight-bg"></div> 
       <p> 
        Ut Enim ad minim veniam quis nostrud exercitation ullamco laboris. Nisi ut aliquip ex ea commodo 
       </p> 
      </div> 
     </div> 
    </div> 
</section>

CSS:

#screens-eight { 
    background: blue; 
    padding-bottom: 180px; 
} 
.screens-eight-left { 
    background: #835fa8; 
    position: relative; 
    z-index: 0; padding-bottom: 
    80px; padding-top: 80px; 
} 

@media(min-width: 992px) { 
    .screens-eight-left .screens-eight-bg { 
    background: #835fa8; 
    left: 0; position: 
    absolute; top: 0; 
    width: 50%; 
    z-index: -1;} 
}

Quelle

2016-03-23 rico.aka.jojo

Möchten Sie, dass der Hintergrund so breit ist wie die ganze Seite oder nur auf der linken Seite angezeigt wird? –

@TimOgilvy Ich möchte nur auf der linken Seite erreichen, zum Beispiel können Sie ein Bild in meiner Antwort sehen –

Wenn eine Antwort, die funktioniert, passen Sie die Größe des Fensters, Lösungen mit nur einer Medienabfrage kann brechen, wenn Sie das Gitter ändern Größe. –

Änderung Klasse container-fluid-container

http://getbootstrap.com/css/#grid-example-fluid

Quelle

2016-03-23 03:27:06 partypete25

Sie verwenden die Bootstrap-Klasse .container, die mit Medienabfragen auf einen bestimmten grid system beschränkt.

Wenn Sie die Seite des Bildschirms erreichen möchten, müssen Sie entweder .container-fluid verwenden und dann in diesem arbeiten, oder brechen Sie Ihre lila Box aus dem Container mit einer Art von CSS oder Javascript Magie.

Sie können Container verschachteln und jagen, aber ich kann nicht versprechen, dass sie nichts kaputt machen werden. Spielen Sie damit: (entnommen aus Ihrem Code-Stift). Sie müssten dann Prozentsätze oder Leerzeichen verwenden, um Ihren Lorem ipsum dorthin zu verschieben, wo Sie ihn haben möchten. (Here is a codepen of the same code)

<section id="screens-eight" class="clearfix"> 
    <div class="container-fluid"> 
    <h4>wide part of doc:</h4> 
     <div class="row"> 
     <div class="col-md-6 screens-eight-left"> 
      <div class="screens-eight-bg"></div> 
      <p> 
        Ut Enim ad minim veniam quis nostrud exercitation ullamco laboris. Nisi ut aliquip ex ea commodo 
      </p> 
      </div> 
     </div> 
     <div class="container"> 
     <h4>Sneaky narrow part of doc 1, a container within the wide container. May break something.</h4> 
     </div> 
    </div> 
    <div class="container"> 
    <h4>Narrow part of doc 2.</h4> 
    </div> 
</section>

Quelle

2016-03-23 03:35:36

hier, versuchen Sie diesen Code

<section id="screens-eight" class="clearfix"> 

<div class="cover"> 

      <div class="container"> 
       <div class="row"> 
        <div class="col-md-6 screens-eight-left"> 
         <div class="screens-eight-bg"></div> 
         <p> 
          Ut Enim ad minim veniam quis nostrud exercitation ullamco laboris. Nisi ut aliquip ex ea commodo 
         </p> 
        </div> 
       </div> 
      </div> 

      </div> 


     </section> 






.cover 
{background: #835fa8; 
    float:left; 


    width:100%; 
    } 


#screens-eight { padding-bottom: 180px; position:relative;} 
.screens-eight-left {position: relative; z-index: 0; padding-bottom: 80px; padding-top: 80px;}

Quelle

2016-03-23 03:52:35

auch hier für Sie gespeichert http://codepen.io/anon/pen/dMWpWy –

habe ich die Lösung in meinem lokalen Rechner. Folgen Sie einfach den nachstehenden Schritten.

HTML

<section id="screens-eight" class="clearfix"> 
     <div class="container"> 
      <div class="row"> 
       <div class="col-md-6 screens-eight-left"> 
        <p> 
         Ut Enim ad minim veniam quis nostrud exercitation ullamco laboris. Nisi ut aliquip ex ea commodo 
        </p> 
       </div> 
      </div> 
     </div> 
    </section>

CSS

#screens-eight {background: blue; padding-bottom: 180px;} 
.screens-eight-left {position: relative; z-index: 0; padding-bottom: 80px; padding-top: 80px;} 

@media(min-width: 992px) { 
    .screens-eight-left .screens-eight-bg {background: #835fa8; left: 0; position: absolute; top: 0; width: 50%; z-index: -1;} 
}

** Jetzt machen 1 Bild in Photoshop **

Schritt 1: - schaffen neues Bild mit einer Höhe von 1PX und Breite von 3000PX Schritt 2: - Füllen Sie 50% des linken Teils mit dem Farbcode # 835fa8. also hast du 50% des Teils mit dieser Farbe # 835fa8 und rechts 50% Teil Blank (transparent) gelassen. Schritt 3: - Jetzt Bild als PNG-Format speichern.

nennen jetzt, dass PNG-Bild in dieser ID = "Bildschirme-eight"

so müssen Sie CSS

#screens-eight { 
    background-image: url(line.png); 
    background-position: center; 
    background-repeat-y: repeat; 
}

so jetzt Ihre aktualisierte CSS wie sein hinzufügen unter

#screens-eight {background: blue; 
    background-image: url(line.png); 
    background-position: center; 
    background-repeat-y: repeat; 
    padding-bottom: 180px; 
} 
.screens-eight-left {position: relative; z-index: 0; padding-bottom: 80px; padding-top: 80px;} 

@media(min-width: 992px) { 
    .screens-eight-left .screens-eight-bg {background: #835fa8; left: 0; position: absolute; top: 0; width: 50%; z-index: -1;} 
}

Ich habe auch dieses Bild hochgeladen, das ich erstelle, damit Sie die Idee bekommen können.

Quelle

2016-03-23 03:59:07

Bootstrap volle Breite Sidebar mit Hintergrundfarbe

Antwort

Verwandte Themen