Question

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

我正在使用引导程序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>

Answer 2

通过将按钮包装在div内并在grid内使用grid，可以轻松实现此目的。

.bd-exemple {
   display: grid;
   grid-template-columns: auto 1fr auto;
}

.bd-exemple .equal-widths{
   display: grid;
   grid-template-columns: repeat(auto-fit, minmax(10px, 1fr));
   word-break: break-all; /*remove if not needed*/
   overflow: hidden; /*remove if not needed*/
}

Example Fiddle

Answer 3

请使用此功能！

/*---For inline and width Styling---*/
button {
    width: auto;
    margin-right: 2px;
    float: left;
    white-space: nowrap;
    height: 40px;
    cursor: pointer;
    margin-bottom: 5px;
}

/*---For-BAckground Color & Other styling ---*/
button {
    border: navajowhite;
    border-radius: 4px;
    color: buttontext;
    background-color: #f8f9fd;
}


.bd-exemple button:nth-child(2) {
background: #e64a3b;
color: #fff;
}
.bd-exemple button:nth-child(3) {
background: #4c71e0;
color: #fff;
}

<html>
<head>
  <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.1/css/all.css" integrity="sha384-50oBUHEmvpQ+1lW4y57PTFmhCaXp0ML5d60M1M7uH2+nqUivzIebhndOJK28anvf" crossorigin="anonymous">
</head>
<body>
<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>
</body>
</html>

如何使所有按钮内联相同大小的引导程序？

3 个答案:

请使用此功能！