如何保持页脚元素对齐？

Question

我试图让我的页脚响应所以在阅读并使用一些例子之后我已经制作了一个，但它不是我想要的。

我希望连续显示Data protection disclaimer contact而不是一个上升。

＆＃13;

＆＃13;

.table {
  position: relative;
  right: 0;
  bottom: 0;
  left: 0;
  height: 50px;
  line-height: 50px;
  clear: both;
  color: white;
  background-color: black;
  font-size: 14px;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  z-index: 10;

  display:table;
  width:100%;

}
.table > div {
  display:table-cell;
  width:33%;
}

.table > .cell150 {
  width:33%;
}
.cell150:before {
  content:'';
  display:inline-block;
  width:33%;
}

.a{
  background-color: blue;
 }
 
.b{
  background-color: yellow;
 }
 
.c{
  background-color: pink;
 }

＆＃13;

<div class="table">
      <div class="cell150 a">
          V 1.1
      </div>
      <div class="cell150 b">
            Hi StackOverflow
      </div>
      <div class="cell150 c">
        <div class="col-xs-4 col-sm-8 col-md-4">
          <a href="/data_protection.pdf" class="footer-item hidden-xs" target="_blank">Data protection</a><a href="/disclaimer.pdf" class="footer-item hidden-xs" target="_blank">Disclaimer</a><a  class="footer-item">Contact</a>
        </div>
      </div>
    </div>

＆＃13;

＆＃13;

＆＃13;

好的，所以我不知道它为什么显示我想要...但在我的情况下，它是这样的：

你们有想法如何解决这个问题吗？

Answer 1

看看这个。

将col-md-4更改为col-md-12

注意：在整页视图中查看结果

＆＃13;

＆＃13;

.table {
  position: relative;
  right: 0;
  bottom: 0;
  left: 0;
  height: 50px;
  line-height: 50px;
  clear: both;
  color: white;
  background-color: black;
  font-size: 14px;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  z-index: 10;
  display: table;
  width: 100%;
}

.table>div {
  display: table-cell;
  width: 33%;
}

.table>.cell150 {
  width: 33%;
}

.cell150:before {
  content: '';
  display: inline-block;
  width: 33%;
}

.a {
  background-color: blue;
}

.b {
  background-color: yellow;
}

.c {
  background-color: pink;
}

.footer-item {
  margin: 10px;
}

＆＃13;

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<div class="table">
  <div class="cell150 a">
    V 1.1
  </div>
  <div class="cell150 b">
    Hi StackOverflow
  </div>
  <div class="cell150 c">
    <div class="col-xs-4 col-sm-8 col-md-12">
      <a href="/data_protection.pdf" class="footer-item hidden-xs" target="_blank">Data protection</a><a href="/disclaimer.pdf" class="footer-item hidden-xs" target="_blank">Disclaimer</a><a class="footer-item">Contact</a>
    </div>
  </div>
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 2

<div class="table">
      <div class="cell150 a">
          V 1.1
      </div>
      <div class="cell150 b">
            Hi StackOverflow
      </div>
      <div class="cell150 c">
        <div class="col-xs-12 col-sm-12 col-md-12">
        <ul>
          <li><a href="/data_protection.pdf" class="footer-item hidden-xs" target="_blank">Data protection</a> </li>
          <li><a href="/disclaimer.pdf" class="footer-item hidden-xs" target="_blank">Disclaimer</a> </li>
          <li><a  class="footer-item">Contact</a> </li>
        </ul>
        </div>
      </div>
    </div>

ul {
    list-style: none;
    padding: 0px;
}

 ul li {
    display: inline;
    padding: 3px;
}

Answer 3

喜欢这个？虽然在xs屏幕中，它们将分开显示

＆＃13;

＆＃13;

.table {
text-align: center;
  position: relative;
  right: 0;
  bottom: 0;
  left: 0;
  height: 50px;
  line-height: 50px;
  clear: both;
  color: white;
  background-color: black;
  font-size: 14px;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  z-index: 10;
  display: table;
  width: 100%;
}

.table>div {
  display: table-cell;
  width: 33%;
}

.table>.cell150 {
  width: 33%;
}

.cell150:before {
  content: '';
  display: inline-block;
  width: 33%;
}

.a {
  background-color: blue;
}

.b {
  background-color: yellow;
}

.c {
  background-color: pink;
}

＆＃13;

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<div class="table">
  <div class="col-xs-4 a">
    V 1.1
  </div>
  <div class="col-xs-4 b">
    Hi StackOverflow
  </div>
  <div class="col-xs-4 c">
    <div class="col-xs-12 ">
      <a href="/data_protection.pdf" class="col-sm-4 footer-item" target="_blank">Data protection</a>
      <a href="/disclaimer.pdf" class="col-sm-4 footer-item" target="_blank">Disclaimer</a>
      <a class="col-sm-4 footer-item">Contact</a>
    </div>
  </div>
</div>

＆＃13;

＆＃13;

＆＃13;