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

Posted 2023-03-06

【中文标题】用于显示和居中元素的引导响应媒体查询在 Ralis 上不起作用

【英文标题】：Bootstrap Responsive Media Query for Showing and Centering Elements Not Working on Ralis

【发布时间】：2020-10-25 09:36:34

【问题描述】：

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

我不知道如何使粘性底部导航仅出现在 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;
    

任何帮助或反馈将不胜感激！

【参考方案1】：

您可以将引导类d-size-none，如d-md-none 添加到您的导航固定底部。 md 代表引导断点。您可以覆盖它，或者如果您愿意，甚至可以添加其他人。如果不满意，您可以将带有display: none 的媒体断点添加到您的页脚导航中。

文本对齐不适用于内联块。标签宽度将与文本相同，因此文本将居中。

您可以尝试display: block; width: 100;。这将使文本居中，。或使用text-center 类给你的父母。但是您的导航上的其他元素（例如按钮元素）可能仍然存在问题，这可能会损害您的导航品牌完全居中。

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

---

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

---

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

您将面临另一个问题，因为引导程序还会在较小的屏幕上将锚标记上的所有水平填充覆盖为零。要拥有与以前相同的填充，您可能需要将每个链接类设置为 nav-link px-2，或者为锚标签设置另一个您喜欢的水平填充。