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

Question

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

这是我的 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 表示隐藏尺寸小于 mid。只需删除 d-none，您的元素就会停止消失。

更多信息在这里:Bootstrap Documentation

编辑:添加了代码段。