Question

我的css遇到了麻烦。我试图将我的联系信息，报价和我的联系表单放在同一行但不同的列中。而且为什么我的html并不都适用于一个页面，我可以滚动到rigth并且只有空白空间。我认为它是因为我在我的导航栏边缘添加了-1.23em;但是，我之所以这样做是因为我的导航栏没有填满整个页面。这是我的要点和bitballon的链接。先感谢您。

https://gist.github.com/bklynbest/a19565b1b5289f045919e76d657848ea

http://sad-goodall-e4f115.bitballoon.com

Answer 1

您在第103行的.row下直接嵌套了body div，导致页面展开超过100％宽度

Bootstrap需要一个包含元素来包装网站内容和安置我们的网格系统。您可以选择使用两个容器中的一个你的项目。需要注意的是，由于填充量较多，既不是容器是可嵌套的。 bootstrap containers

关于联系信息，您的嵌套和类名称不正确，您目前有以下内容：

<div class="container-fluid" id="contact">
    <div class="row">
        <div class="column">
            <div class="col-xs-12 col-md-12">
                <div id="quote">...</div>
            </div>
            <div class="col-lg-4 col-md-4">
                <div class="contact">...</div>
            </div>
        </div>
    </div>
</div>
<form>

您需要将其更改为遵循bootstrap3 grid约定，如下所示：

<div class="container">
    <div class="row" id="contact">
       <div class="col-sm-4">
          <div id="quote">...</div>
       </div>
       <div class="col-sm-4">
          <div class="contact">...</div>
       </div>
       <div class="col-sm-4">
          <form>
       </div>
    </div>
</div>

相同行但不同列的信息

1 个答案: