Question

我正在尝试创建一个带有居中文本元素的单行导航栏，该元素可以是任意长的，我需要截断它以便为周围的其他元素留出空间。

这是fiddle。

我的样子

Back    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt
[Button]                                                                              Yadda yadda

而我想要：

Back  [Button]        Lorem ipsum dolor sit amet, consectetur adipiscing...           Yadda yadda

我尝试过 Adjust width to parent's width and truncate when higher，但它基于具有固定宽度的父容器，而此处并非如此。

Answer 1

flexbox 有最小宽度的问题。 min-width: 0;

请注意，我在 .flex-nowrap 中添加了 navbar。
请注意，我在 .mw-100.text-truncate 中添加了 .nav-item。

.min-width-0 {
  min-width: 0;
}

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/css/bootstrap.min.css" integrity="sha384-B0vP5xmATw1+K9KRQjQERJvTumQW0nPEzvF6L/Z6nronJ3oUOFUFpCjEUQouq2+l" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-Piv4xVNRyMGpqkS2by6br4gNJ7DXjqk09RmUpJ8jgGtD7zP9yug3goQfGII0yAns" crossorigin="anonymous"></script>

<nav class="navbar navbar-expand-lg navbar-light bg-light flex-nowrap" id="navbar-top">
  <ul class="navbar-nav mr-auto no-expand">
    <li class="nav-item"><a class="nav-link" href="/" role="button">Back</a>
    </li>
    <li class="nav-item px-10">
      <a href="/" class="btn btn-secondary" role="button" hx-get={% url 'score_switch_compact' %} hx-swap="innerHTML" hx-target="#strips-container"><span class="material-icons md-24 vcenter">button</span></a>
    </li>

  </ul>

  <ul class="navbar-nav navbar-expand min-width-0">
    <li class="nav-item mw-100 text-truncate">
      Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt
    </li>
  </ul>
  <ul class="navbar-nav ml-auto no-expand">
    <li class="nav-item">
      <a class="nav-link" href="/" role="button">
       Yadda yadda
      </a>
    </li>

  </ul>
</nav>

Answer 2

为了使文本元素居中，您可以将两个 navbar-collapse 元素设置为 flex: 1 0 0%。这将导致两端的元素均匀增长，使您的文本居中。为了限制文本元素的空间量，您可以对 div 应用一个宽度（我在小屏幕上使用了 70%，这适用于低至 320px 宽的显示，之后切换器换行到下一行，50%在更大的屏幕上）。

.w-70 {
    width: 70%;
}

@media (min-width:992px) {
    .flex-lg-1-0-0 {
        flex: 1 0 0% !important;
    }

    .w-lg-50 {
        width: 50% !important;
    }
}

<link href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/js/bootstrap.bundle.min.js"></script>

<nav class="navbar navbar-expand-lg navbar-light bg-light">
    <div class="navbar-brand w-70 w-lg-50 text-center text-truncate order-lg-1">
        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt
    </div>

    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target=".navbarSupportedContent" aria-controls="navbarSupportedContent1 navbarSupportedContent2" aria-expanded="false" aria-label="Toggle navigation">
        <span class="navbar-toggler-icon"></span>
    </button>

    <div class="collapse navbar-collapse navbarSupportedContent flex-lg-1-0-0" id="navbarSupportedContent1">
        <ul class="navbar-nav mr-auto">
            <li class="nav-item active">
                <a class="nav-link ml-2 ml-lg-0" href="#">Back</a>
            </li>
            <li class="nav-item" style="padding-top: 0.375rem">
                <button type="button" class="btn btn-secondary btn-sm">Button</button>
            </li>
        </ul>
    </div>
    
    <div class="collapse navbar-collapse navbarSupportedContent flex-lg-1-0-0 order-lg-2" id="navbarSupportedContent2">
        <ul class="navbar-nav ml-auto">
            <li class="nav-item">
                <a class="nav-link ml-2 ml-lg-0" href="#">Yadaa</a>
            </li>
            <li class="nav-item">
                <a class="nav-link ml-2 ml-lg-0" href="#">Yadaa</a>
            </li>
            <li class="nav-item">
                <a class="nav-link ml-2 ml-lg-0" href="#">Yadaa</a>
            </li>
        </ul>
    </div>
</nav>
<div class="container mt-5">
    <div class="row">
        <div class="col text-center">
            Center
        </div>
    </div>
</div>

我确实修改了你的版本：

我为较小的显示器添加了一个 navbar-toggler 按钮。您的 fiddle 使用了 navbar-expand-lg，但没有包含切换开关。
文本元素的样式为 nav-item，但似乎没有任何好处，因此我将其更改为文本元素的样式为 navbar-brand。此外，对于小屏幕，我从左侧开始文本项，然后在大屏幕中将其切换到中间。
有一个按钮样式的链接。如果它不会将用户带到不同的页面，那么使用按钮而不是链接（更适合屏幕阅读器）是最简单的方法。

Bootstrap4 导航栏：将项目截断为父宽度

2 个答案: