volle Breite und Höhe von drei divs horizontal in Bootstrap

Meine Frage zu machen ist i drei Partitionen in meiner Web-Seite machen muß, die in den vollen Bildschirm kleben wie folgt Image volle Breite und Höhe von drei divs horizontal in Bootstrap

Aber was derzeit geschieht, ist es nur in der Mitte gehalten. Ich möchte es in voller Breite machen, Folgendes ist mein Bootstrap HTML-Code.

<meta charset="utf-8"> 
 
    <meta name="viewport" content="width=device-width, initial-scale=1"> 
 
    <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"> 
 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script> 
 
    <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script> 
 
    <link rel="stylesheet" href="test.css"> 
 

 
<body> 
 

 
<div class="container"> 
 
    
 
    <div class="row"> 
 
    <div class="col-sm-4" style="background-color:yellow;"> 
 
     Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.<br> 
 
     Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. 
 
    </div> 
 
    <div class="col-sm-4" style="background-color:pink;"> 
 
     Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto.  
 
    </div> 
 
\t <div class="col-sm-4" style="background-color:green;"> 
 
     Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto.  
 
    </div> 
 
    </div> 
 
</div> 
 
    
 
</body>

Ich brauche es, wie oben zu machen, aber alle anderen werden alternative Lösungen zu akzeptiert werden. :)

Quelle

2016-04-02 Kaw123

Siehe in Ausführliche Snippet

.row, .col-sm-4, .container { 
 
    height: 100%; 
 
} 
 

 
.container { 
 
width: 100%!important; 
 
} 
 

 
body, html { 
 
height: 100%; 
 
}

<meta charset="utf-8"> 
 
    <meta name="viewport" content="width=device-width, initial-scale=1"> 
 
    <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"> 
 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script> 
 
    <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script> 
 
    <link rel="stylesheet" href="test.css"> 
 

 
<body> 
 

 
<div class="container"> 
 
    
 
    <div class="row"> 
 
    <div class="col-sm-4" style="background-color:yellow;"> 
 
     Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.<br> 
 
     Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. 
 
    </div> 
 
    <div class="col-sm-4" style="background-color:pink;"> 
 
     Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto.  
 
    </div> 
 
\t <div class="col-sm-4" style="background-color:green;"> 
 
     Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto.  
 
    </div> 
 
    </div> 
 
</div> 
 
    
 
</body>

Quelle

2016-04-02 09:51:17 Pedram

Vielen Dank, hat perfekt funktioniert :) – Kaw123

Bitte versuchen Sie dies:

Ihre div-Container entfernen und diese Klassennamen

row-fluid

wie diese zu Ihrem ersten Reihe geben:

<div class="row-fluid"> 
    <div class="col-sm-4" style="background-color:yellow;"> 
     Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.<br> 
     Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. 
    </div> 
    <div class="col-sm-4" style="background-color:pink;"> 
     Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto.  
    </div> 
    <div class="col-sm-4" style="background-color:green;"> 
     Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto.  
    </div> 
    </div>

Quelle

2016-04-02 09:25:30 satya

Danke für die Antwort, es hat funktioniert. Wie kann ich jede Spalte voll Bildschirmgröße (Höhe) machen? Es hängt von der Größe des Textes – Kaw123

In Bootstrap-3 sollten Sie .container-fluid verwenden.

.row-fluid war ein Bootstrap 2 Sache.

Quelle

2016-04-02 09:56:44 Stuart

volle Breite und Höhe von drei divs horizontal in Bootstrap

Antwort

Verwandte Themen