同一行但不同列的信息答案

【问题标题】：Information on same row but different columns同一行但不同列的信息
【发布时间】：2018-03-30 06:44:11
【问题描述】：

我的 CSS 有问题。我试图将我的联系信息、报价和我的联系表格放在同一行但不同的列中。还有为什么我的 html 不能全部放在一个页面上，我可以滚动到右侧，并且只有空白区域。我认为它是因为我在导航栏边距中添加了 -1.23em；但是，我这样做只是因为我的导航栏没有填满整个页面。这是我的 gist 和 bitballon 的链接。先感谢您。

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

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

【问题讨论】：

寻求调试帮助的问题（“为什么这段代码不起作用？”）必须在问题本身中包含所需的行为、特定问题或错误以及重现它所需的最短代码。不是要点或您的网站。没有明确问题陈述的问题对其他读者没有用处。见：minimal reproducible example

标签： css html twitter-bootstrap-3

【解决方案1】：

您在第 103 行的 body 正下方的嵌套中有一个 .row 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>

【讨论】：