Bootstrap: Einstellung Overlay div auf reaktionsfähigen Blockspalten

Question

Ich versuche, eine reaktionsfähige Seite von 4 Blöcken mit Zeilen und Spalten mit einem Bildhintergrund und einem Overlay und Titel zu machen. Ich bin in der Lage, alles außer der Breite des Overlays zu arbeiten.

Hier ist ein Bild, das zeigt, was ich zu beheben versuche. Die Spalte auf der linken Seite ist immer von links gefüllt, aber die rechte Spalte fehlt die volle Breite der linken und rechten Seite.

HTML

<div class="wrapper"> 
    <div class="row" id="rows"> 
     <div class="col-sm-6 col-md-6 col-lg-12 text-center portfolio"> 
      <div id="portfolio-overlay" class="titlePush">Portfolio</div> 
     </div> 
     <div class="col-sm-6 col-md-6 col-lg-4 text-center tools"> 
      <div id="tools-overlay" class="titlePush">Tools</div> 
     </div> 
     <div class="col-sm-6 col-md-6 col-lg-4 text-center about"> 
      <div id="about-overlay" class="titlePush">About</div> 
     </div> 
     <div class="col-sm-6 col-md-6 col-lg-4 text-center contact"> 
      <div id="contact-overlay" class="titlePush">Contact</div> 
     </div> 
    </div> 
</div> 

CSS

html,body,.wrapper { 
    height:100%; 
    width:100%; 
} 

#rows { 
    height: 30%; 
    font-family: 'Poiret One', cursive; 
    font-size: 24px; 
    color: white; 
} 


.portfolio { 
    height: 100%; 
    background: url("https://www.topdraw.com/assets/uploads/2015/07/HiRes2.jpg"); 
    -webkit-background-size:; 
    background-size: cover; 
    background-position: center; 
} 

/* Portfolio Overlay Block */ 
#portfolio-overlay { 
    background: rgb(0, 0, 0); /* fallback color*/ 
    background: rgba(0, 0, 0, 0.4); 
    height: 100%; 
    max-width:100%; 
} 

Demo: JSFiddle

Answer 1

standardmäßig col-*-* haben padding im Bootstrap, müssen Sie es zurücksetzen. und Sie vermissen Klasse .container deshalb Sie horizontale Scrollbar

Hinweis hatte: benutzte ich .text-center zurücksetzen padding nur zu vereinfachen, weil es eine Klasse innerhalb des gleichen Elements angewendet .col-*-*

@import url(https://fonts.googleapis.com/css?family=Poiret+One); 
 
body { 
 
    font-family: 'Poiret One', cursive; 
 
} 
 
html, 
 
body, 
 
.wrapper { 
 
    height: 100%; 
 
} 
 
/* Header/Jumbotron Section */ 
 

 
.header { 
 
    height: 40%; 
 
    background-color: red; 
 
} 
 
/* Jumbotron Font Styling & Size */ 
 

 
.headFont { 
 
    font-size: 10vh; 
 
    color: white; 
 
    text-decoration: underline; 
 
    text-align: center; 
 
    top: 15%; 
 
} 
 
/* Sets hyperlink color */ 
 

 
#rowLink { 
 
    color: white; 
 
} 
 
/* Pushes box titles down */ 
 

 
.title { 
 
    padding-top: 40px; 
 
} 
 
/***************************************** 
 
      Content Blocks 
 
******************************************/ 
 

 
/* Rows-content Homepage */ 
 

 
#rows { 
 
    height: 30%; 
 
    font-family: 'Poiret One', cursive; 
 
    /*font-size: 2.3vh;*/ 
 
    font-size: 24px; 
 
    color: white; 
 
} 
 
.portfolio { 
 
    height: 100%; 
 
    /*background: red; /* For browsers that do not support gradients 
 
    background: -webkit-linear-gradient(left,rgba(255,0,0,0),rgba(255,0,0,1)); 
 
    background: -o-linear-gradient(right,rgba(255,0,0,0),rgba(255,0,0,1)); 
 
    background: -moz-linear-gradient(right,rgba(255,0,0,0),rgba(255,0,0,1)); 
 
    background: linear-gradient(to right, rgba(255,0,0,0), rgba(255,0,0,1)); /*Standard*/ 
 
    background: url("https://www.topdraw.com/assets/uploads/2015/07/HiRes2.jpg"); 
 
    -webkit-background-size: ; 
 
    background-size: cover; 
 
    background-position: center; 
 
} 
 
/* Hover effects for portfolio block */ 
 

 
.portfolio:hover { 
 
    text-decoration: underline; 
 
} 
 
/* Portfolio Overlay Block */ 
 

 
#portfolio-overlay { 
 
    background: rgb(0, 0, 0); 
 
    /* fallback color*/ 
 
    background: rgba(0, 0, 0, 0.4); 
 
    height: 100%; 
 
    max-width: 100%; 
 
} 
 
/* Tools Block */ 
 

 
.tools { 
 
    background-color: green; 
 
    height: 100%; 
 
} 
 
/* Hover effects for tools block */ 
 

 
.tools:hover { 
 
    text-decoration: underline; 
 
} 
 
/* Tools Overlay */ 
 

 
#tools-overlay { 
 
    background: rgb(0, 0, 0); 
 
    /* fallback color*/ 
 
    background: rgba(0, 0, 0, 0.4); 
 
    height: 100%; 
 
    max-width: 100%; 
 
} 
 
/* About Me Block */ 
 

 
.about { 
 
    background-color: lightblue; 
 
    height: 100%; 
 
} 
 
/* Hover effects for tools block */ 
 

 
.about:hover { 
 
    text-decoration: underline; 
 
} 
 
/* About Me Overlay */ 
 

 
#about-overlay { 
 
    background: rgb(0, 0, 0); 
 
    /* fallback color*/ 
 
    background: rgba(0, 0, 0, 0.4); 
 
    height: 100%; 
 
    max-width: 100%; 
 
} 
 
/* Contact Me Block */ 
 

 
.contact { 
 
    background-color: darkorange; 
 
    height: 100%; 
 
} 
 
/* Hover effects for tools block */ 
 

 
.contact:hover { 
 
    text-decoration: underline; 
 
} 
 
#contact-overlay { 
 
    background: rgb(0, 0, 0); 
 
    /* fallback color*/ 
 
    background: rgba(0, 0, 0, 0.4); 
 
    height: 100%; 
 
    max-width: 100%; 
 
} 
 
.row .text-center { 
 
    padding: 0 
 
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" /> 
 
<div class="container wrapper"> 
 
    <div class="row header"> 
 
    <div class="col-sm-12 headFont jumboHero text-center">Monsieur Bigglesworth</div> 
 
    </div> 
 

 
    <div class="row" id="rows"> 
 
    <a href="#" id="rowLink"> 
 
     <div class="col-sm-6 col-md-6 col-lg-12 text-center portfolio"> 
 
     <div id="portfolio-overlay" class="title">Portfolio</div> 
 
     </div> 
 
    </a> 
 
    <div class="col-sm-6 col-md-6 col-lg-4 text-center tools"> 
 
     <div id="tools-overlay" class="title">Tools</div> 
 
    </div> 
 
    <div class="col-sm-6 col-md-6 col-lg-4 text-center about"> 
 
     <div id="about-overlay" class="title">About</div> 
 
    </div> 
 
    <div class="col-sm-6 col-md-6 col-lg-4 text-center contact"> 
 
     <div id="contact-overlay" class="title">Contact</div> 
 
    </div> 
 
    </div> 
 
</div>

Answer 2

Fügen Sie das zu Ihrem CSS hinzu:

.text-center { 
    padding-right:0; 
    padding-left: 0; 
}