时间戳

首页 > 解决方案 > 页脚中的中间元素消失

css - 页脚中的中间元素消失

问题描述

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

在此处输入图像描述

这是我的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>

标签： cssbootstrap-4

解决方案

.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，您的元素就应该停止消失。

更多信息：引导文档

编辑：添加了片段。

推荐阅读