如何使所有按鈕內聯相同大小的引導程序？
[英]How to make all buttons inline same size bootstrap?
問題描述
我需要制作一個帶有嵌入式按鈕的導航欄，但需要制作所有相同大小和嵌入式的按鈕。
我正在使用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>
除了第一個和最后一個較小且只需要在圖標內部留有空格的按鈕外，我需要所有按鈕都位於內嵌式導航欄中。
3 個解決方案
解決方案1
1 已采納 2019-04-28 15:26:08
您可以嘗試使用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>
解決方案2
1 2019-04-28 17:03:29
您可以通過包裝一個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*/
}
解決方案3
-1 2019-04-28 17:17:05
兄弟使用這個！
/*---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>
即使調整窗口大小后，如何使引導程序縮略圖大小相同？
[英]How to make bootstrap thumbnails same size, even after resizing the window?
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.