Bootstrap 网格 3 列布局不起作用

Question

我想我到处都看了，什么都试过了。我想为一个有 3 列的网站制作页脚 - 每列都有 h4 header 和图像（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>

有什么原因吗？提前致谢。

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

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

Answer 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

Bootstrap 网格 3 列布局不起作用

Bootstrap grid 3 column layout doesn't work

html

css

footer

twitter-bootstrap