如何保持頁腳元素對齊？

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>