einfacher Code funktioniert nicht

<!DOCTYPE html> 
<html lang="en"> 
<head> 
    <meta charset="UTF-8"> 
    <title>Login Page</title> 
    <!-- Latest compiled and minified CSS --> 
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous"> 

    <!-- Optional theme --> 
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap-theme.min.css" integrity="sha384-fLW2N01lMqjakBkx3l/M9EahuwpSfeNvV63J5ezn3uZzapT0u7EYsXMjQV+0En5r" crossorigin="anonymous"> 

    <!-- Latest compiled and minified JavaScript --> 
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script> 
</head> 

<body> 
<div class="container"> 
    <div class="row"> 
     <div class="col-md-4"></div> 
     <div class="col-md-4"> 
     <img src="http://lorempixel.com/400/200/sports" alt="Loading Logo..."> 
     </div> 
     <div class="col-md-4"></div> 
    </div> 
</div> 
</body>

Aber der Körper ist höher als das Fenster und hat mehr Platz mit links als rechts. Wie folgt aus:einfacher Code funktioniert nicht

Was mache ich falsch?

Quelle

2016-07-25 Miss.Code

Markiert für unklar zu sein. Du hast keine Frage gestellt. – Tyler

http://stackoverflow.com/help/how-to-ask – Tyler

Sie versuchen, ein Bild in eine column anwenden passen, dass das Bild selbst größer ist dann. Abhängig davon, was Sie letztendlich versuchen, gibt es mehrere Möglichkeiten, dies zu beheben.

Wenn Sie nur versuchen, ein Bild in der Mitte des Ansichtsfensters zu platzieren, können Sie die Klasse img-responsive anwenden, während Sie column offsets verwenden (anstelle von leeren Spalten auf beiden Seiten).

Sie können dies auch ohne das Raster tun, indem Sie die Klasse center-block auf dem Bild verwenden.

Hier sind einige Beispiele, die Ihren Beispielcode mit dem Überlauf der Spalte zusammen mit einigen Lösungen für die Zentrierung des Bildes zeigen.

Arbeitsbeispiele:Run Code Snippet bei Fullpage

/*FOR DEMO ONLY*/ 
 

 
.row { 
 
    background: #F8BBD0; 
 
} 
 
.col-md-4, 
 
.col-xs-4, 
 
.col-xs-12 { 
 
    border: 4px solid #BF360C; 
 
} 
 
div img { 
 
    border: 4px solid #212121; 
 
} 
 
/*FOR DEMO ONLY*/

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" /> 
 
<div class="container"> 
 
    <h1 class="text-center">IMAGE OVERFLOWING COLUMN</h1> 
 
    <div class="row"> 
 
    <div class="col-md-4"></div> 
 
    <div class="col-md-4"> 
 
     <img src="http://placehold.it/400x200/FFF176/212121" alt=""> 
 
    </div> 
 
    <div class="col-md-4"></div> 
 
    </div> 
 
</div> 
 
<hr> 
 
<div class="container"> 
 
    <h1 class="text-center">COLUMN OFFSET</h1> 
 
    <div class="row"> 
 
    <div class="col-xs-4 col-xs-offset-4"> 
 
     <img src="http://placehold.it/400x200/880E4F/FFF" alt="" class="img-responsive"> 
 
    </div> 
 
    </div> 
 
</div> 
 
<hr> 
 
<div class="container"> 
 
    <h1 class="text-center">CENTER BLOCK</h1> 
 
    <img src="http://placehold.it/400x200/880E4F/FFF" alt="" class="center-block img-responsive"> 
 
</div> 
 
<hr> 
 
<div class="container"> 
 
    <h1 class="text-center">CENTER BLOCK + COL-XS-12</h1> 
 
    <div class="row"> 
 
    <div class="col-xs-12"> 
 
     <img src="http://placehold.it/400x200/880E4F/FFF" alt="" class="center-block img-responsive"> 
 
    </div> 
 
    </div> 
 
</div>

Quelle

2016-07-25 06:35:12 vanburen

-1

Sie können nur "MD" Klasse Dann Abfrage Medien gelten

HTML

<div class="container"> 
    <div class="row"> 
     <div class="span4"></div> 
     <div class="span4"><img class="center-block" src="http://placehold.it/350x150"/></div> 
     <div class="span4"></div> 
    </div> 
</div>

über
Grid Klassen Das Bootstrap Grid-System erfahren hat vier Klassen :

Verwenden der Klasse Ihren Zweck, wenn die Anwendung Anzeige dann, in welchem Modus Classs

Demo Link

Quelle

2016-07-25 05:01:51

Ich verstehe es nicht ???????? –

Versuchen Sie diesen Link [http://jsfiddle.net/patelsumit5192/11bprycy/] –

einfacher Code funktioniert nicht

Antwort

Verwandte Themen