Question

我使用Bootstrap创建了一个页脚，中间的列有一个小问题，特别是当我缩小窗口大小或在智能手机上尝试该应用程序时，我会得到这个{{3} }：

这是我的html：

<footer class="footer">
  <div class="container-fluid">
    <div class="row">
      <div class="col-md-4">
        This is a footer.
      </div>
      <div class="col-md-4">
        <div class="text-center footer-links d-none d-md-block">
          <a href="javascript: void(0);">Link1</a>
          <a href="javascript: void(0);">Link2</a>
          <a href="javascript: void(0);">Link3</a>
        </div>
      </div>
      <div class="col-md-4">
        <form class="form-horizontal">
          <label class="col-sm-3 control-label" for="requestCulture_RequestCulture_UICulture_Name">
                        Language:
                    </label>

          <select>
                        <option>1</option>
                        <option>1</option>
                    </select>
        </form>
      </div>
    </div>
  </div>
</footer>

Answer 1

.footer {
    border-top: 1px solid rgba(152,166,173,.2);
    bottom: 0;
    padding: 19px 30px 20px;
    position: absolute;
    right: 0;
    color: #98a6ad;
    left: 250px;
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<footer class="footer">
  <div class="container-fluid">
    <div class="row">
      <div class="col-md-4">
        This is a footer.
      </div>
      <div class="col-md-4">
        <div class="text-center footer-links d-md-block">
          <a href="javascript: void(0);">Link1</a>
          <a href="javascript: void(0);">Link2</a>
          <a href="javascript: void(0);">Link3</a>
        </div>
      </div>
      <div class="col-md-4">
        <form class="form-horizontal">
          <label class="control-label" for="requestCulture_RequestCulture_UICulture_Name">
                        Language:
                    </label>
          <select>
                        <option>1</option>
                        <option>1</option>
                    </select>
        </form>
      </div>
    </div>
  </div>
</footer>

答案在这一部分：

  <div class="text-center footer-links d-none d-md-block">

d-none d-md-block表示隐藏尺寸小于中间尺寸的皮革。只需删除d-none，您的元素就会停止消失。

此处有更多信息：Bootstrap Documentation

编辑：添加了代码段。

页脚中的中间元素消失

1 个答案: