如何保持页脚元素对齐？

Question

我试图让我的页脚响应如此阅读和使用一些例子后，我做了一个，但它不是我想要的。

我想连续显示Data protection disclaimer contact，而不是一个上行显示。

.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; 
 
}

<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>

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

你们是否有一个想法如何解决这个问题？

Answer 1

看看这个。

变化col-md-4到col-md-12

注：见整版视图

.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; 
 
}

<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>

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屏幕，他们将在不同的行

.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; 
 
}

<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>