2類col-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%);
}

這是我的Jsfiddle 。您能幫我弄清楚出什么問題嗎？ 謝謝

Answer 1

修復引導鏈接后，我看不到任何問題。 您確定您已經在瀏覽器窗口中查看了足夠寬的結果-因此您沒有呈現小於中（md）視圖的結果嗎？

Answer 2

您有正確的想法將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 3

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

更新了小提琴，您沒有包含引導樣式表

如果您需要在移動設備上使用相同的col寬度，請將col-md-6類調整為col-xs-6

Answer 4

采用

<div class="clear:both"></div>

就在div 行的結束標簽之前，然后像我一樣分發標簽。

<footer>
    <div class="container">
        <div class="row">
            <div class="col-md-6">
                <a href='#'>BRAND</a>
            </div>
            *<div class="col-md-6">*
            <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 class="clear:both"></div>**
        </div>
    </div>
</footer>