Question

我有一个基本代码，在页面右侧显示一个空白区域，检查它我发现当我把一个div放在＆lt; ..行＆gt; ＆LT; ..容器＆gt;

这里是指数：

<?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;
}

可能是页眉和页脚的相关代码：的header.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>

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

Answer 1

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

Answer 2

我最近遇到了一个非常类似的问题，这让我花了很长时间才弄明白。对我来说，这不是通常的行/容器问题。我正在使用form-control手动渲染复选框。在Bootstrap中，form-control的所有文字元素都有width:100% by default。在线拥有许多复选框导致它们溢出（无形）并在右侧产生这个大的白色间隙。令人惊讶的是，使用Chrome Dev工具调试也不容易。

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

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

和

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

希望能帮助通过谷歌登陆这里的人有同样的问题

Bootstrap 3 - 右侧的白色空间

2 个答案: