Ich möchte, dass mein Bild den kompletten Platz der Bootstrap-Spalte einnimmt

Ich versuche ein Layout zu erstellen, in dem ich die Zeile in 2 Spalten geteilt habe und die zweite Spalte mit dem vorgestellten Bild den kompletten Platz der Spalte einnehmen soll . Ich möchte, dass dies auf reaktionsfähige Weise funktioniert.Ich möchte, dass mein Bild den kompletten Platz der Bootstrap-Spalte einnimmt

<div class="container"> 
     <div class="row"> 
      <div class="col-md-6 content"> 
       <div class="row"> 
        <div class="col-md-6"> 
       <img src="http://placehold.it/250X250"> 
       </div> 
       <div class="col-md-6 title"> 
        <h3>first title here</h3> 
        <h2>Sub-title goes here</h2> 
       </div> 
       </div> 
      <div class="row"> 
       <ul class="col-md-12 main-list"> 
         <li>abcdefgh ijkl mnop 1234 564 xyz xyz xyz xyz xyz xyz xyz</li> 
         <li>abcdefgh ijkl mnop 1234 564 xyz xyz xyz xyz xyz xyz xyz</li> 
         <li>abcdefgh ijkl mnop 1234 564 xyz xyz xyz xyz xyz xyz xyz</li> 
         <li>abcdefgh ijkl mnop 1234 564 xyz xyz xyz xyz xyz xyz xyz</li> 
       </ul> 
       <div class="small-images"> 
       <img class="small-image1" src="http://placehold.it/200x100"> 
       <img class="small-image2" src="http://placehold.it/200x100"> 
       </div> 
      </div> 
      </div> 

      <div class="col-md-6 featured-image"> 
       <img src="http://placehold.it/300X300"> 
      </div> 
     </div>

Quelle

2017-02-05 nsd

Sie ein Bild verwenden, die 300*300 ist, warum es wird weniger Platz wegnimmt sonst Ihr Layout in Ordnung ist. Ich habe ein Bild mit voller Breite zur Verfügung gestellt, das im folgenden Ausschnitt gut funktioniert.
Um das Layout ansprechend zu machen, fügen Sie dem <div>s z. col-md-6 col-sm-6 col-xs-6 col-lg-6. Fügen Sie auch class="img-responsive" zu Ihrem img-Tag hinzu, um das Bild ansprechbar zu machen.

<html> 
 
<head> 
 
<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.4/jquery.min.js"></script> 
 
      <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script> 
 
      </head> 
 
      <body> 
 
      <div class="container"> 
 
     <div class="row"> 
 
      <div class="col-md-6 col-sm-6 col-xs-6 col-lg-6 content"> 
 
       <div class="row"> 
 
        <div class="col-md-6 col-sm-6 col-xs-6 col-lg-6"> 
 
       <img src="http://placehold.it/250X250" class="img-responsive"> 
 
       </div> 
 
       <div class="col-md-6 col-sm-6 col-xs-6 col-lg-6 title"> 
 
        <h3>first title here</h3> 
 
        <h2>Sub-title goes here</h2> 
 
       </div> 
 
       </div> 
 
      <div class="row"> 
 
       <ul class="col-md-12 col-sm-12 col-xs-12 col-lg-12 main-list"> 
 
         <li>abcdefgh ijkl mnop 1234 564 xyz xyz xyz xyz xyz xyz xyz</li> 
 
         <li>abcdefgh ijkl mnop 1234 564 xyz xyz xyz xyz xyz xyz xyz</li> 
 
         <li>abcdefgh ijkl mnop 1234 564 xyz xyz xyz xyz xyz xyz xyz</li> 
 
         <li>abcdefgh ijkl mnop 1234 564 xyz xyz xyz xyz xyz xyz xyz</li> 
 
       </ul> 
 
       <div class="small-images"> 
 
       <img class="small-image1" src="http://placehold.it/200x100" class="img-responsive"> 
 
       <img class="small-image2" src="http://placehold.it/200x100" class="img-responsive"> 
 
       </div> 
 
      </div> 
 
      </div> 
 

 
      <div class="col-md-6 col-sm-6 col-xs-6 col-lg-6 featured-image "> 
 
       <img src="https://cdn.pixabay.com/photo/2016/02/19/15/46/dog-1210559_960_720.jpg" class="img-responsive"> 
 
      </div> 
 
     </div> 
 
     </body> 
 
    </html>

Quelle

2017-02-05 08:53:14 neophyte

Dank für diese Antwort. Aber für kleine Geräte funktioniert das nicht. Ich möchte, dass das Inhaltsbild und der Titel aneinander angrenzen und das angezeigte Bild ausgeblendet wird. Auch die Hauptliste erstreckt sich nicht auf volle 12 Spalten. Ich habe Hidden-Sm für das vorgestellte Bild verwendet, aber ich denke, irgendwie ist sein Platz immer noch besetzt und die anderen Elemente passen nicht hinein – nsd

Ich möchte, dass mein Bild den kompletten Platz der Bootstrap-Spalte einnimmt

Antwort

Verwandte Themen