Zwei divs mit 50% Breite, während Inhalt im Container

Question

Wie das Aussehen erreichen, wie es im Bild ist?

Es ist nur regelmäßiger Bootstrap-Code für Spalten, aber zuerst zwei Spalten auf weißen background innerhalb .container, während die anderen zwei Spalten auf schwarzen background und dass schwarzen background werden Recht, die Art und Weise alles das sein sollten Ende.

CodePen

<div class="container"> 
<div class="col-md-3"> 
    <p>First column</p> 
    </div> 
<div class="col-md-3"> 
    <p>Second column</p> 
    </div> 
<div class="col-md-3"> 
    <p>Third column</p> 
    </div> 
<div class="col-md-3"> 
    <p>Fourth column</p> 
    </div> 
</div> 

Answer 1

Verwendung linear-gradient in body, Ihr geben .container ist die Mutter, und Sie haben keine Wrapper um .container

Sorry, dass ich dich störe, aber was ich meinte, war das Bildzu platzierenwie diese image.prntscr.com/image/78940c8115c943a186500ac24556758b.jpeg

weiteren hinzufügen Eltern div (als Kind von body) und fügen Sie background-image zu diesem div

body { 
 
    background: linear-gradient(to right, white 0%, white 50%, black 50%, black 50%, black 100%); 
 
} 
 
#wrap { 
 
    background: url(//lorempixel.com/200/200) no-repeat 66.6% 0/25% auto 
 
} 
 
.container { 
 
    border: 1px solid #f01; 
 
} 
 
[class^="col-"] p { 
 
    color: white; 
 
    height: 75px; 
 
    background-color: blue 
 
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" /> 
 
<div id="wrap"> 
 
    <div class="container"> 
 
    <div class="col-xs-3 col-md-3"> 
 
     <p>First column</p> 
 
    </div> 
 
    <div class="col-xs-3 col-md-3"> 
 
     <p>Second column</p> 
 
    </div> 
 
    <div class="col-xs-3 col-md-3"> 
 
     <p>Third column</p> 
 
    </div> 
 
    <div class="col-xs-3 col-md-3"> 
 
     <p>Fourth column</p> 
 
    </div> 
 
    </div> 
 
</div>

Answer 2

Eine weitere Ebene der Verschachtelung sollte darum kümmern:

<div class="container"> 
<div class="col-md-6"> 
<div class="col-md-3"> 
    <p>First column</p> 
    </div> 
<div class="col-md-3"> 
    <p>Second column</p> 
    </div> 
</div> 
<div class="col-md-6"> 
<div class="col-md-3"> 
    <p>Third column</p> 
    </div> 
<div class="col-md-3"> 
    <p>Fourth column</p> 
    </div> 
</div> 
</div> 

Möglicherweise müssen Sie eine ID an das md-6 Klasse Element hinzufügen, um die Hintergrundfarben zu verwalten.

Answer 3

Sie könnten einen linearen Hintergrund mit Farbverlauf auf einem Vorfahrenelement verwenden.

Ich habe eine Medienabfrage hinzugefügt, um eine schmale Ansicht zu bearbeiten. Ich bin mir nicht sicher, was Sie hier eigentlich machen möchten.

Ansicht Vollbild für Weitblick:

.container { 
 
    border: 1px solid #f01; 
 
} 
 
.col-md-3 { 
 
    border: 1px solid #333; 
 
} 
 
.bg { 
 
    padding: 30px; 
 
    background: linear-gradient(to right, #ffffff 0%, #ffffff 49%, #ffffff 50%, #000000 50%, #000000 100%, #000000 100%); 
 
} 
 
@media (max-width: 992px) { 
 
    .bg { 
 
    padding: 30px; 
 
    background: linear-gradient(to bottom, #ffffff 0%, #ffffff 49%, #ffffff 50%, #000000 50%, #000000 100%, #000000 100%); 
 
    } 
 
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/> 
 

 

 
<div class="bg"> 
 
    <div class="container"> 
 
    <div class="col-md-3"> 
 
     <p>First column</p> 
 
     <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quia recusandae omnis praesentium dolorum soluta aperiam iste eum, neque necessitatibus pariatur. Neque nam modi mollitia in autem molestiae corporis harum placeat quos quaerat, labore ex 
 
     ratione, possimus quod quo soluta libero, quis dolor! Porro similique natus eius et voluptatibus autem dolores.</p> 
 
    </div> 
 
    <div class="col-md-3"> 
 
     <p>Second column</p> 
 
     <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quia recusandae omnis praesentium dolorum soluta aperiam iste eum, neque necessitatibus pariatur. Neque nam modi mollitia in autem molestiae corporis harum placeat quos quaerat, labore ex 
 
     ratione, possimus quod quo soluta libero, quis dolor! Porro similique natus eius et voluptatibus autem dolores.</p> 
 
    </div> 
 
    <div class="col-md-3"> 
 
     <p>Third column</p> 
 
     <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quia recusandae omnis praesentium dolorum soluta aperiam iste eum, neque necessitatibus pariatur. Neque nam modi mollitia in autem molestiae corporis harum placeat quos quaerat, labore ex 
 
     ratione, possimus quod quo soluta libero, quis dolor! Porro similique natus eius et voluptatibus autem dolores.</p> 
 
    </div> 
 
    <div class="col-md-3"> 
 
     <p>Fourth column</p> 
 
     <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quia recusandae omnis praesentium dolorum soluta aperiam iste eum, neque necessitatibus pariatur. Neque nam modi mollitia in autem molestiae corporis harum placeat quos quaerat, labore ex 
 
     ratione, possimus quod quo soluta libero, quis dolor! Porro similique natus eius et voluptatibus autem dolores.</p> 
 
    </div> 
 
    </div> 
 
</div>