如何使按鈕水平全寬

Question

我正在嘗試創建三個水平且大小相等的按鈕。 但是到目前為止，我設法做到的是三個垂直全寬的按鈕，如下所示。

<section class="section">
<div class="container-fluid">
...
<h2 class="display-5">User Management</h2>
   <br>
   <br>
   <a class="btn btn-info btn-lg btn-block" role="button" href="{{ url_for('create_user') }}">Create New User</a>
   <a class="btn btn-info btn-lg btn-block" role="button" href="{{ url_for('deactivate_user') }}">Deactivate user</a>
   <a class="btn btn-info btn-lg btn-block" role="button" href="{{ url_for('change_user_password') }}">Change User Password</a>
...
</div> 

output 是：

如何使它們水平並占據整個寬度？

Answer 1

Bootstrap 帶有一個非常強大的網格系統，您可以使用它，分別利用類row （用於行）和col （用於列）。

col class 使用 1-12 的數字系統，表示列的寬度大小。 一整行的最大可能值為 12。如何選擇布局完全取決於您。 您甚至可以根據需要嵌套row和col類以獲得所需的網格。 更多關於 Bootstrap Grid的信息。

例子：

<div class="row">
    <div class="col-4">
        <a class="btn btn-info btn-lg btn-block" role="button" href="{{ url_for('create_user') }}">Create New User</a>
    </div>
    
    <div class="col-4">
        <a class="btn btn-info btn-lg btn-block" role="button" href="{{ url_for('deactivate_user') }}">Deactivate user</a>
    </div>
    
    <div class="col-4">
        <a class="btn btn-info btn-lg btn-block" role="button" href="{{ url_for('change_user_password') }}">Change User Password</a>
    </div>
</div>

代碼片段示例：

 <link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.0/css/bootstrap.min.css" rel="stylesheet"/> <div class="row"> <div class="col-4"> <a class="btn btn-info btn-lg btn-block" role="button" href="{{ url_for('create_user') }}">Create New User</a> </div> <div class="col-4"> <a class="btn btn-info btn-lg btn-block" role="button" href="{{ url_for('deactivate_user') }}">Deactivate user</a> </div> <div class="col-4"> <a class="btn btn-info btn-lg btn-block" role="button" href="{{ url_for('change_user_password') }}">Change User Password</a> </div> </div>

Answer 2

將它們包裝在一個 div 中，您可以刪除 btn-block 並添加 col class 以自動獲取列，如下所示：

<div class="row">
    <a class="btn btn-info btn-lg col" role="button" href="{{ url_for('create_user') }}">Create New User</a>
    <a class="btn btn-info btn-lg col" role="button" href="{{ url_for('deactivate_user') }}">Deactivate user</a>
    <a class="btn btn-info btn-lg col" role="button" href="{{ url_for('change_user_password') }}">Change User
        Password</a>
</div>