引导网格 3 列布局不起作用
Posted
技术标签:
【中文标题】引导网格 3 列布局不起作用【英文标题】:Bootstrap grid 3 column layout doesn't work 【发布时间】:2017-11-29 14:56:37 【问题描述】:我想我到处寻找并尝试了一切。 我想为一个有 3 列的网站制作页脚 - 每列都有 h4 标题和图像(png 图标)。我没有得到 3 列,而是得到 1 列,所有内容都堆叠在彼此下方。 html 代码:
<div class="footer">
<div class="container">
<div class="row">
<div class="col-sm-4">
<h4>Instagram</h4>
<a href="#" target="_blank"/><img src="img/instagram.png"/></a>
</div>
<div class="col-sm-4">
<h4>Facebook</h4>
<a href="#" target="_blank"/><img src="img/facebook.png"/></a>
</div>
<div class="col-sm-4">
<h4>LinkedIn</h4>
<a href="#" target="_blank"/><img src="img/linkedin.png"/></a>
</div>
</div>
</div>
</div>
有什么理由吗?提前致谢。
【问题讨论】:
您的代码没有问题。您是否检查过所有内容(css 和 js)都没有错误地加载? 使用 col-md-4 是否有效? 试试 col-md 或 col-lg 这是一个猜测,但它可能与您的锚标签有关。您正在将它们全部自动关闭,因此 关闭可能会混淆它。从所有开始 标记的末尾删除正斜杠。 我尝试这样做 - 没有任何改变。我还尝试了 col-md-4、col-lg-3 等的所有组合。 【参考方案1】:用<a href="#" target="_blank">
替换<a href="#" target="_blank"/>
的所有实体,会很开心!
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<div class="footer">
<div class="container">
<div class="row">
<div class="col-sm-4">
<h4>Instagram</h4>
<a href="#" target="_blank"><img src="img/instagram.png"/></a>
</div>
<div class="col-sm-4">
<h4>Facebook</h4>
<a href="#" target="_blank"><img src="img/facebook.png"/></a>
</div>
<div class="col-sm-4">
<h4>LinkedIn</h4>
<a href="#" target="_blank"><img src="img/linkedin.png"/></a>
</div>
</div>
</div>
</div>
【讨论】:
只是为了参与讨论,在我的情况下,我的标签没有任何错误,但我不得不在 css 中将 col-*-4 更改为 32%,一切正常【参考方案2】:第一:
<a href="#" target="_blank"/><img src="img/instagram.png"/></a>
应该是
<a href="#" target="_blank"><img src="img/instagram.png"></a>
对于 img 不需要用 /
关闭它 REF: Do I need a "/" at the end of an <img> or <br> tag, etc.?
2nd:如果您希望它们始终是一行中的 3 个项目,请使用 col-xs-4
。 (如果没有其他定义(lg/md/sm 等),所有屏幕尺寸都将落入 xs)
3rd:可能是您的参考设置不正确。试试这些:
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div class="footer">
<div class="container">
<div class="row">
<div class="col-xs-4">
<h4>Instagram</h4>
<a href="#" target="_blank"><img src="img/instagram.png"></a>
</div>
<div class="col-xs-4">
<h4>Facebook</h4>
<a href="#" target="_blank"><img src="img/facebook.png"></a>
</div>
<div class="col-xs-4">
<h4>LinkedIn</h4>
<a href="#" target="_blank"><img src="img/linkedin.png"></a>
</div>
</div>
</div>
</div>
【讨论】:
我之前没有设置参考 - 现在全部排序,非常感谢! @MariuszS。好酷=D【参考方案3】:您没有从 bootstrap 中获得预期结果的原因可能是您缺少资源。
请确保您的文档部分包含以下内容。
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
CodePen 示例:https://codepen.io/CapySloth/pen/gRGNxa
【讨论】:
以上是关于引导网格 3 列布局不起作用的主要内容,如果未能解决你的问题,请参考以下文章