响应式移动和桌面友好的 4 列页脚，带有自定义边距和引导网格答案

【问题标题】：Responsive Mobile and Desktop Friendly 4 Column Footer w Custom Margins w Bootstrap Grids响应式移动和桌面友好的 4 列页脚，带有自定义边距和引导网格
【发布时间】：2014-10-07 13:47:19
【问题描述】：

我想创建一个看起来不错的 4 列页脚。页脚的内容宽度不同，我希望列中每个文本块之间的空间相等。我知道这样做的唯一方法是为每个 div 添加一个类并使用边距，直到看起来正确为止。我似乎必须为一列或多列添加负边距，以便每个文本块之间的间距相等。我可以让东西在大屏幕上看起来不错，但是当您在较小的屏幕上查看页面时，div 重叠并且事情变得不稳定。我希望这些列开始堆叠在一起并尽可能地填满屏幕的整个宽度。这是一个 jsfiddle 和我的代码，它显示了我正在尝试做的事情。您会为此添加什么以使其在台式机和尽可能多的移动设备上看起来不错？

http://jsfiddle.net/natetg/qhtyL7t8/

'<div class="navbar navbar-fixed-bottom footer">
  <div class="container">
   <div class="row">
    <div class="col-xs-6 col-md-4 col-lg-3">
      <p>columnContentWithLargeWidth</p>
    </div>
    <div class="col-xs-6 col-md-4 col-lg-3">
      <p>columnContentShort</p>
    </div>
    <div class="col-xs-6 col-md-4 col-lg-3">
      <p>columnShort</p>
    </div>
    <div class="col-xs-6 col-md-4 col-lg-3">
      <p>ColumnContentWithLargestWidthAndWantThisAllOnOneLinePlease</p>
    </div>
  </div>
 </div>
</div>`

【问题讨论】：

我在这里可能完全错了，但是您声明您希望它在您的实际代码中堆叠等（不仅仅是您在此处发布的内容和 jsfiddle）您之间是否有空格的话？现在它被视为一个单词，浏览器不知道如何处理它。如果添加空格，您将获得引导 jsfiddle.net/qhtyL7t8/1 的正确行为
想象一列带有徽标，另一列带有三行地址，另一列带有电话号码，最后一列带有版权的文本，以及指向看起来更好的条款和条件的链接在一条线上。是的，在现实世界的例子中，这些词有空格。
您发布的代码有什么问题，看起来不错 [或者我可能不明白您的问题 :)] 在大型桌面上，您已使用 col-lg-3 将其分为 4 列。在小型桌面上，您使用了 col-md-4，这将使最后一个框移动到下一行，而在较小的桌面上，您将其分成 2 个相等的部分。如果你想要完整的块，你可以使用 col-xs-12。
谢谢，这很有帮助。当你达到最小的屏幕尺寸时，是否有办法让四个 div 都垂直堆叠？现在，当宽度变小时它们会重叠。

标签： html css twitter-bootstrap grid footer

【解决方案1】：

尝试使用 .container-fluid 和 .row-fluid 代替容器和行。

<div class="navbar navbar-fixed-bottom footer">
   <div class="container-fluid">
     <div class="row-fluid">
       <div class="col-xs-6 col-md-4 col-lg-3">
         <p>columnContentWithLargeWidth</p>
       </div>
       <div class="col-xs-6 col-md-4 col-lg-3">
         <p>columnContentShort</p>
       </div>
       <div class="col-xs-6 col-md-4 col-lg-3">
         <p>columnShort</p>
       </div>
       <div class="col-xs-6 col-md-4 col-lg-3">
         <p>ColumnContentWithLargestWidthAndWantThisAllOnOneLinePlease</p>
       </div>
     </div>
   </div>
</div>

【讨论】：

Bootstrap 3 中没有 .row-fluid