简单代码不能正常工作

问题描述：

<!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>

但是身体比窗口更上面，并且比左边的空间更多。就像这样：简单代码不能正常工作

我在做什么错？

标志？是不清楚。你没有问一个问题。 – Tyler

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

答

你试图将图片处理成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>

答

你只能用 “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

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

试试这个链接[http://jsfiddle.net/patelsumit5192/11bprycy/] –

简单代码不能正常工作

相关推荐