Responsive „Medien“ in Bootstrap 4

Ich schrieb diesen Code:Responsive „Medien“ in Bootstrap 4

 <div class="media text-xs-left"> 
     <div class="media-left media-middle"> 
      <p class="lead"> 
      <img src="default.jpg"> 
      </p> 
     </div> 
     <div class="media-body"> 
      <p class="lead"> 
      <h6>here text</h6> 
      </p> 
     </div> 
     </div>

Und alles ist gut, wenn ich meine Seite in vollen Fenstern öffnen, aber wenn ich die Fenstergröße ändern, um zu sehen, wie es auf dem Handy schauen, Medien Objekt reagiert nicht. Ich möchte Text unter Bild auf Geräten mit kleinem Bildschirm anzeigen. Bitte hilf mir, wie es geht.

Quelle

2016-04-09 charliepl

@media screen and (max-width : 768px){ 

}

Ihre css ändern innerhalb dieses Tags, zum Beispiel:

@media screen and (max-width : 768px){ 
    .lead{ 
    margin-left: auto !important; 
    margin-right: auto !important; 
    display: block !important; 
    } 
}

Quelle

2016-04-09 14:34:46

Bootstrap 4 in Alpha-Version noch ist und nach der offiziellen Website

Not yet available, but hopefully soon!

siehe http://v4-alpha.getbootstrap.com/

und für Ihr Problem verweisen Sie bitte auf das Grid-System von Bootstrap, es ist wel l erklärt in ihrer Website http://getbootstrap.com/css/#grid-options

Sie so etwas in Ihrem Code

<div class="container-fluid">  
    <div class="row"> 
    <div class="col-xs col-xm"> 
     <div class="media text-xs-left">  
     <div class="media-left media-middle">    
      <p class="lead">     
      <img src="default.jpg">    
      </p>    
     </div>    
     <div class="media-body">    
      <p class="lead">     
      <h6>here text</h6>    
      </p>    
     </div>   
     </div> 
    </div> 
    </div> 
</div>

put in Ihrem Code .container-fluid div tun müssen, und fügen Sie div.row und div.col-xs oder div.col-sm weiter. Diese Klassen sind Beispiele, die für eine bessere Reaktion Ihres Layouts in verschiedenen Bildschirmgrößen verantwortlich sind.

Quelle

2016-04-09 14:48:04 Fil

Ihr Code sieht gut aus, aber das Bild ist immer noch in der Nähe von Text auf kleinen Bildschirmgrößen. Zum Beispiel nimmt das Bild auf dem iPhone 5s den größten Teil des Platzes ein und es gibt zu wenig Platz für komfortables Lesen von Texten. – charliepl

Ich denke, Sie sollten '.image-responsive' Klasse auf Bild verwenden, und justieren css' max-width' und 'max-height' wie diese' 'auch diese http://www.w3schools.com/bootstrap/ tryit.asp? Dateiname = trybs_ref_img-responsive & stacked = h. Sie sind nicht darauf beschränkt, die '' auch mit div zu verpacken – Fil

<!DOCTYPE html> 
 
<html> 
 
<head> 
 
<script src="https://code.jquery.com/jquery.min.js"></script> 
 
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" type="text/css" /> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script> 
 
    <meta charset="utf-8"> 
 
    <meta name="viewport" content="width=device-width"> 
 
    <title>Navbar</title> 
 
    <style> 
 
    @media screen and (max-width:768px){ 
 
     h6{ 
 
     font-size: 20px; 
 
     } 
 
    } 
 
    body{ 
 
     padding:10px; 
 
    } 
 
    </style> 
 
</head> 
 
<body> 
 
    <div class="row"> 
 
<div class="col-xs-12"> <img style="width:180px;height:90px" src="https://www.google.co.in/images/nav_logo242.png"> </div> 
 
      
 
     
 
    <div class="col-xs-12"> <h6>here texthere texthere texthere texthere texthere texthere texthere texthere texthere texthere texthere texthere texthere texthere texthere texthere texthere texthere texthere texthere texthere texthere texthere texthere texthere texthere text</h6> </div> 
 
    </div>   
 
</body> 
 
</html>

Jedes Mal, wenn u jedes Gerät ansprechbar Web-Seite machen, starten Sie ein mobiles Gerät aus zu machen, dann für größere Geräte gehen. Dies ist der beste und einfachste Weg, dies zu tun.So, hier habe ich gemacht, wie Sie für mobile Geräte gesagt hatten.

Quelle

2016-04-10 08:01:06 Manish62

Responsive „Medien“ in Bootstrap 4

Antwort

Verwandte Themen