Question

第一次来SO。

我四处寻找，只是看到有人说“看看父母”。我的问题有点不同。

这是我的演示网站 - http://falconsnest.cf（Django Framework）

这是github - github.com/Sir-Lagsalot/FalconsNest

我的问题是div“容器”。它不适合整个页面，它只是奇怪地偏离左侧中心。我该如何解决这个问题？

段：

@import 'http://falconsnest.cf/static/webapp/css/project/custom.css':
@import 'http://falconsnest.cf/static/webapp/css/bootstrap.min.css':
  @import 'http://falconsnest.cf/static/webapp/js/jquery-3.0.0.min.js':
  @import 'http://falconsnest.cf/static/webapp/js/project/headerjs.js':

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<script src="http://falconsnest.cf/static/webapp/js/project/headerjs.js"></script>
<script src="http://falconsnest.cf/static/webapp/js/jquery-3.0.0.min.js"></script>
<link href="http://falconsnest.cf/static/webapp/css/bootstrap.min.css" rel="stylesheet"/>
<link href="http://falconsnest.cf/static/webapp/css/project/custom.css" rel="stylesheet"/>

<body>

<div class="container">
  <button type="button" class="btn btn-primary btn-lg raised" data-toggle="collapse" data-target="#Signin"><span>Sign In!</span></button>
  <div id="Signin" class="collapse">

      <div class="loginbar">
        <h1>LOGIN</h1>
      </div>
      <div class="prompt">
        <form action=forms.py method="POST">
          <input type='hidden' name='csrfmiddlewaretoken' value='6olNNouNeySQqSmiKExapeXe69tyAwZP' />
          StudentID:<br> <input class="form-control" type="text" name="username"><br>
          Password:<br> <input class="form-control" type="password" name="password">
          <p></p>
          <font size=2px> Don't have an account? <a href="/register">Register here!</a> <p></p></font>
          <input type="submit" value="Submit">
        </form>
      </div>

  </div>
</div>
  </body>

希望这应该更清楚：

I want the div to cover the whole page. It's not. I've tried changing the class and setting the width to 100%. Doesn't work, but I can do thing like 140$, but that's not elegant and not dynamic to different screen sizes.

Answer 1

其中一个会对它进行排序： 1）添加全宽 -

.yourDiv {
   Width: 100%;
}

2）删除边距和填充

.yourDiv {
   margin: 0px;
   padding: 0px;
}

3）检查是否有任何元素没有导致你的div向左移动而不是全宽

如果那些不能正常工作，请提供一些代码和图片，说明你的div是如何放置的。

Answer 2

使用容器流体代替容器类。

它显示偏离中心，因为Bootstrap定义了容器类具有值的值，而容器流体类具有自己的值。

根据最佳视图调整这些值。

容器 - 流体类定义了一些左右边距值，这会导致您的工作出现问题。

虽然容器类也定义了一些非常少量的边距。

Answer 3

哈哈，我的坏人。对不起你们误导你们。我发现bootstrap的div为1570px，而不是100％。当我把它恢复到100％时，它就适合那个col-2。我意识到col-2来自另一个html文件。 MEH。

感谢您的帮助！

Div没有占据全宽？

3 个答案: