[英]2 class of col-md-6 can't make element stack horizontally
我正在尝试使页脚包含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 。您能帮我弄清楚出什么问题吗? 谢谢
修复引导链接后,我看不到任何问题。 您确定您已经在浏览器窗口中查看了足够宽的结果-因此您没有呈现小于中(md)视图的结果吗?
您有正确的想法将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>
采用
<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>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.