Bootstrap网格3列布局不起作用

时间:2017-06-26 17:29:21

标签: html css twitter-bootstrap footer

我想我到处寻找并尝试了一切。 我想为一个有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>

有什么理由?提前谢谢。

3 个答案:

答案 0 :(得分:0)

@model ResetPasswordViewModel ... <input asp-for="@User.Identity.Name" class="form-control" readonly /> ... 的所有实体替换为<a href="#" target="_blank"/>,并且会很高兴!

&#13;
&#13;
<a href="#" target="_blank">
&#13;
&#13;
&#13;

答案 1 :(得分:0)

<强>第一

<a href="#" target="_blank"><img src="img/instagram.png"></a>

应该是

/

对于img,无需使用col-xs-4 REF关闭它:Do I need a "/" at the end of an <img> or <br> tag, etc.?

第二次:如果您希望它们在一行中始终为3项,请使用<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> 。 (如果没有其他定义(lg / md / sm等),所有屏幕尺寸都将落入xs)

第3次:可能是您未正确设置的参考。尝试那些:

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

black.setOnClickListener(new View.OnClickListener() {
        @Override
        public void onClick(View v) {
            View bView = findViewById(R.id.lin);
            View root = bView.getRootView();
            root.setBackgroundColor(Color.parseColor("#000000"));
        }
    });

答案 2 :(得分:0)

您没有从引导程序中获得预期结果的原因可能是由于您错过了资源。

请确保您的文档部分包含以下内容。

    <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