2类col-md-6不能使元素水平堆叠

Question

I'm trying to make footer that consist of 2 anchor text and I want to make both of those anchor text placed side by side (not vertically).

Here's my 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>

And here's the 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%);
}

Here's my Jsfiddle Can you help me figure it out what's wrong? Thank you

Answer 1

I don't see any issues with it after fixing the bootstrap link. Are you sure you have viewed the outcome in the browser window wide enough - so you are not rendering a smaller than medium (md) view?

Answer 2

You have the right idea to add col-md-2 to each link. Make sure you have the bootstrap CSS loaded on the page.

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

Make sure you're viewing the page on md (or larger) screen size. Alternatively, use col-sm-* or col-xs-* styles. Following sizes are used:

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)

An improvement would be to use col-md-offset-2 col-md-2 on the first link, instead of 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/

Updated fiddle you weren't including the bootstrap stylesheet

Adjust the col-md-6 classes to col-xs-6 if you need it the same col width on mobile

Answer 4

use

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

just before the closing tag of row div and distribute the tags like I did.

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