2类md md-6不能使元素水平叠加。

Question

我试图使页脚，其中包括2个锚文本，我想使这两个锚文本并排(而不是垂直)。

这是我的HTML：

<footer>
   <div class="container">
      <div class="row">
         <div class="col-md-6">
            <a href='#'>BRAND</a>
         </div>
         <div class="col-md-2">
            <a href='#'>Social 1</a>
         </div>
         <div class="col-md-2">
            <a href='#'>Social 2</a>
         </div>
         <div class="col-md-2">
            <a href='#'>Social 3</a>
         </div>
      </div>
   </div>
</footer>

下面是CSS：

footer {
  bottom: 0;
  width: 100%;
  height: 50px;
  text-align: center;
  background: -webkit-linear-gradient(top, rgba(125,126,125,1) 0%,rgba(14,14,14,1) 10%);
}

这是我的小提琴手，你能帮我弄清楚是怎么回事吗？谢谢

Answer 1

您有正确的想法将col-md-2添加到每个链接中。确保在页面上加载了引导CSS。

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />

确保在md (或更大)屏幕上查看页面。或者，使用col-sm-*或col-xs-*样式。所使用的尺寸如下：

xs: Extra small devices (phones, less than 768px)
md: Small devices (tablets, 768px and up)
sm: Medium devices (desktops, 992px and up)
lg: Large devices (large desktops, 1200px and up)

一个改进是在第一个链接上使用col-md-offset-2 col-md-2，而不是col-md-6。

​

footer {
  bottom: 0;
  width: 100%;
  height: 50px;
  text-align: center;
  background: -webkit-linear-gradient(top, rgba(125, 126, 125, 1) 0%, rgba(14, 14, 14, 1) 10%);
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />

<!-- Shows this working with `col-xs-*` (to make it viewable on small code snippet screen). -->
<footer>
  <div class="container">
    <div class="row">
      <div class="col-xs-offset-2 col-xs-2">
        <a href='#'>BRAND</a>
      </div>
      <div class="col-xs-2">
        <a href='#'>Social 1</a>
      </div>
      <div class="col-xs-2">
        <a href='#'>Social 2</a>
      </div>
      <div class="col-xs-2">
        <a href='#'>Social 3</a>
      </div>
    </div>
  </div>
</footer>

​

Answer 2

在修复引导链接之后，我没有看到任何问题。你确定你已经在浏览器窗口中看到了足够宽的结果-所以你没有呈现一个小于中型(md)的视图吗？

Answer 3

https://jsfiddle.net/32gund40/6/

更新的小提琴--你没有包括引导样式表

如果需要的话，可以将col-md-6类调整为col-xs-6，在移动设备上使用相同的宽度