Bootstrap 3 - 右侧的空白区域答案

【问题标题】：Bootstrap 3 - White space on right sideBootstrap 3 - 右侧的空白区域
【发布时间】：2015-06-27 06:27:04
【问题描述】：

我有一个基本代码在页面右侧显示一个空白，检查它我可以发现当我将 div 放入

这里是索引：

<?php include('mod/header.php'); ?>

<div class="row"> <!-- Las imagenes son de medida 1 por 1/2 (Rectangular) -->
    <div class="container">
        <div class="col-lg-3 col-md-3 col-sm-4"> <!-- When I add this, the white space appears -->
            <a href="#" class="thumbnail">
                <img src="images/default/thumbnailRect.png">
            </a>
        </div>
    </div>
</div>

<?php include('mod/footer.php'); ?>

我拥有的唯一 css 代码是：

@import url(bootstrap.min.css);
body {
    background-image: url('../images/backgroundPattern.png');
    background-repeat: repeat;
    overflow-x: hidden;
}

可能页眉和页脚的相关代码：头文件.php

<!DOCTYPE html>
<html lang="en">
  <head>
    ...
    <meta name="viewport" content="width=device-width, initial-scale=1">
    ...

    <title>...</title>

    <link href="css/style.css" rel="stylesheet">
  </head>

  <body> 
    <nav class="navbar navbar-default">
        ... common bootstrap navbar ...
    </nav>

页脚.php

<footer>
    <div class="container-fluid">
        <div class="row footer">
            <div class="col-xs-4 col-sm-3 col-md-2">
                ...
            </div>
            <div class="col-xs-4 col-sm-3 col-md-2">
                ...
            </div>
            <div class="col-xs-4 col-sm-3 col-md-2">
                ...
            </div>
            <div class="col-xs-4 col-sm-3 col-md-2">
                ...
            </div>
            <div class="col-md-12">
                <h6 style="text-align: left;" class="text-muted">Title &copy 2015 - Some text</h6>
            </div>
        </div>
    </div>
</footer>

我添加页眉和页脚只是为了让你看到它，但我确信问题出在

<div class="row"> <!-- Las imagenes son de medida 1 por 1/2 (Rectangular) -->
    <div class="container">

    </div>
</div>

【问题讨论】：

标签： css twitter-bootstrap

【解决方案1】：

我最近遇到了一个非常相似的问题，我花了很长时间才弄清楚。对我来说，这不是通常的行/容器问题。我使用form-control 手动呈现复选框。在 Bootstrap 中，所有带有 form-control 的文本元素都有 width:100% by default。在线有许多复选框导致它们溢出（不可见）并导致右侧出现这个大的白色间隙。令人惊讶的是，使用 Chrome 开发工具进行调试也并不容易。

我现在使用以下解决方案将width 设置为auto;（this 回答有帮助）：

<input class="form-control form-control-inline" type="checkbox" ... ... .. />

和

.form-control-inline {
  width: auto;
}

希望它可以帮助通过谷歌登陆这里并遇到同样问题的人

【讨论】：

【解决方案2】：

容器应该是一行的父元素，而不是相反

【讨论】：

对于 Bootstrap 的容器、行、列的精彩、直观的解释，包括对这个问题和其他问题的讨论，阅读这个（不是我没有写的）：helloerik.com/…
@james 感谢詹姆斯的分享！