Bootstrap 用于显示和居中元素的响应式媒体查询在 Ralis 上不起作用

Question

我目前正在使用 Bootstrap V4，我正在尝试创建响应式导航栏。在 ipad 和所有移动设备上，我希望我的导航栏 brand/title 居中对齐并使链接消失，并显示粘性底部导航栏。目前，我遇到三个问题：

我不确定如何让粘性底部导航仅出现在 ipad 屏幕宽度及以下。
文本居中似乎不起作用。
在较小的屏幕宽度上，底部导航栏上的 li 链接会变成垂直列表。

目前，这是我的 _nav.html.erb

<nav class="navbar navbar-expand-lg">
  <a class="navbar-brand" id='title' href="#">App</a>
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>

  <div class="collapse navbar-collapse" id="navbarSupportedContent">
    <ul class="navbar-nav ml-auto">
        <li class="nav-item">
            <a class="nav-link" href="#">Leaderboard</a>
        </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Challenges</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">My Team</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Gallery</a>
        </li>
    
    </ul>
  </div>


  <nav class="navbar fixed-bottom navbar-light bg-light justify-content-center" >
    <ul class="navbar-nav">
        <li class="nav-item">
            <a class="nav-link" href="#">Leaderboard</a>
        </li>
        <li class="nav-item">
             <a class="nav-link" href="#">Challenges</a>
        </li>
        <li class="nav-item">
            <a class="nav-link" href="#">My Team</a>
        </li>
        <li class="nav-item">
            <a class="nav-link" href="#">Gallery</a>
        </li>

    </ul>
    </nav>
</nav>

这是我的 application.scss

@import "bootstrap";

.navbar{
    background-color:pink;
}

@media only screen and (max-width: 1200px) {

    .navbar-brand {
        display:inline-block;
        text-align: center;
    }

}

如有任何帮助或反馈，我们将不胜感激！

Answer 1

您可以将 bootstrap class d-{size}-none 添加到导航固定底部，例如 d-md-none。 md 代表一个 bootstrap 断点。您可以覆盖它，甚至可以根据需要添加其他内容。如果不满意，您可以使用 display: none 添加媒体断点到您的页脚导航。
text-align 不适用于 inline-block。标签宽度将与文本相同，因此文本已经居中。

你可以试试 display: block; width: 100;。这将使文本居中，。或者使用 text-center class 到你的 parent。但是您的导航栏上的其他元素（例如按钮元素）仍然可能会出现问题，这些元素可能会损害您的 nav-brand 完全居中。

一种保证方法是使用如下所示的绝对位置（您只需证明 parent 已声明其位置，在 bootstrap 情况下它已声明）：

@media only screen and (max-width: 1200px) {
  .navbar-brand {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
  }
}

bootstrap 使用 display flex to ul 元素对齐 li 元素。它在大屏幕上将 flex-direction 设置为行方向，而在小屏幕上它设置为列方向。你想成为 row 更小的方向所以你需要覆盖成为 row 只需将 ul class 设置为 navbar-nav flex-row.

您将面临另一个问题，因为 bootstrap 还会在较小的屏幕上将锚标记上的所有水平填充覆盖为零。要具有与以前相同的填充，您可能需要将每个 link class 设置为 nav-link px-2，或者根据您的喜好为锚标记设置另一个水平填充。

Bootstrap 用于显示和居中元素的响应式媒体查询在 Ralis 上不起作用

Bootstrap Responsive Media Query for Showing and Centering Elements Not Working on Ralis

css

ruby-on-rails

bootstrap-4

media-queries

text-alignment