javascript - 如何使所有按钮内联相同大小的 Bootstrap ？

Question

我需要制作一个带内联按钮的导航栏，但需要制作相同的大小和内联。

我正在使用 bootstrap 4

<nav class="navbar navbar-expand navbar-light bg-white topbar mb-4 static-top shadow">

    <div class="bd-exemple">

    <button type="button" class="btn btn-light shadow"><i class="fas fa-question"></i></button>

    <button type="button" class="btn btn-danger shadow"><i class="fas fa-file-alt"></i><br>Protocolo</button>

    <button type="button" class="btn btn-primary shadow"><i class="fas fa-comment-alt"></i><br>Chat</button>

    <button type="button" class="btn btn-light shadow"><i class="fas fa-chart-line"></i><br>Dashboard</button>

    <button type="button" class="btn btn-light shadow"><i class="fas fa-calendar-alt"></i><br>Agenda</button>

    <button type="button" class="btn btn-light shadow"><i class="fas fa-user-injured"></i><br>Pacientes</button>

    <button type="button" class="btn btn-light shadow"><i class="fas fa-user-md"></i><br>Equipe Multidiciplinar</button>

    <button type="button" class="btn btn-light shadow"><i class="fas fa-hospital"></i><br>Planos de Saúde</button>

    <button type="button" class="btn btn-light shadow"><i class="fas fa-capsules"></i><br>Medicamentos</button>

    <button type="button" class="btn btn-light shadow"><i class="fas fa-user-circle"></i><br>teste@innovecare.com.br</button>

    <button type="button" class="btn btn-light shadow botfr"><i class="fas fa-sign-out-alt"></i></button>

    </div>
</nav>

我需要所有的按钮都是内联的并且在导航栏内，除了第一个和最后一个较小的按钮并且只需要在里面有图标的空间。

Answer 1

您可以尝试使用 css 为导航栏中的所有按钮设置固定宽度(不包括第一个和最后一个元素)

请注意，这并不能解决文本溢出的问题，如果字符串比按钮宽度长，它将被剪切或溢出。

.bd-exemple .btn:not(:first-child):not(:last-child) {
  background-color: red;
  width: 100px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

<nav class="navbar navbar-expand navbar-light bg-white topbar mb-4 static-top shadow">

    <div class="bd-exemple">

    <button type="button" class="btn btn-light shadow"><i class="fas fa-question"></i></button>

    <button type="button" class="btn btn-danger shadow"><i class="fas fa-file-alt"></i><br>Protocolo</button>

    <button type="button" class="btn btn-primary shadow"><i class="fas fa-comment-alt"></i><br>Chat</button>

    <button type="button" class="btn btn-light shadow"><i class="fas fa-chart-line"></i><br>Dashboard</button>

    <button type="button" class="btn btn-light shadow"><i class="fas fa-calendar-alt"></i><br>Agenda</button>

    <button type="button" class="btn btn-light shadow"><i class="fas fa-user-injured"></i><br>Pacientes</button>

    <button type="button" class="btn btn-light shadow"><i class="fas fa-user-md"></i><br>Equipe Multidiciplinar</button>

    <button type="button" class="btn btn-light shadow"><i class="fas fa-hospital"></i><br>Planos de Saúde</button>

    <button type="button" class="btn btn-light shadow"><i class="fas fa-capsules"></i><br>Medicamentos</button>

    <button type="button" class="btn btn-light shadow"><i class="fas fa-user-circle"></i><br>teste@innovecare.com.br</button>

    <button type="button" class="btn btn-light shadow botfr"><i class="fas fa-sign-out-alt"></i></button>

    </div>
</nav>