Question

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

但是身体比窗户高，左边有比右边更多的空间。像这样：

我做错了什么？

Answer 1

您尝试将图像放入column，使图像本身更大。根据您最终尝试做的事情，有几种方法可以解决这个问题。

如果您只是尝试将图像放置在视口的中心，则可以在使用img-responsive时应用column offsets类（而不是使用任何一侧的空列）。

您也可以使用图片上的center-block类在没有网格的情况下执行此操作。

以下是一些示例，其中显示了列溢出的示例代码以及一些用于居中图像的解决方案。

工作示例： 在FullPage上运行代码段

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 2

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

了解
网格类 Bootstrap网格系统有四个类：

    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.

当您的应用程序以哪种模式显示然后应用类

时，使用Class Your Purpose

Demo Link

简单的代码不工作

2 个答案: