2016-07-25 160 views
1
<!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> 

但是身體比窗口更上面,並且比左邊的空間更多。就像這樣:簡單代碼不能正常工作

image

我在做什麼錯?

+0

標誌?是不清楚。你沒有問一個問題。 – Tyler

+0

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

回答

0

你試圖將圖片處理成column是該圖像本身較大然後。取決於你最終想做什麼,有幾種方法可以解決這個問題。

如果您只是試圖將圖像放置在視口的中心,則可以在使用column offsets(而不是兩側的空列)時應用img-responsive類。

您也可以通過在圖像上使用center-block類,在沒有網格的情況下執行此操作。

下面是一些示例,它們顯示了您的示例代碼以及列的溢出以及用於居中圖像的一些解決方案。

工作的例子:運行代碼段,整頁

/*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>

-1

你只能用 「MD」 類,然後媒體查詢申請

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> 

瞭解
網格類 的引導網格系統有四個班:

xs (for phones) 
    sm (for tablets) 
    md (for desktops) 
    lg (for larger desktops) 

The classes above can be combined to create more dynamic and flexible layouts. 

使用類你的目標時,你的應用程序顯示在該模式下再申請班組長

Demo Link

+0

我不明白???????? –

+0

試試這個鏈接[http://jsfiddle.net/patelsumit5192/11bprycy/] –