如何使按钮水平全宽

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> 

产出如下：

​

我怎样才能使他们水平和采取完全的宽度？

Answer 1

引导程序附带了一个非常强大的网格系统，您可以使用它们，分别使用类row (行)和col (列)。

col类使用1-12的数字系统，表示宽度中列的大小。整行的最大可能值为12。如何选择布局完全取决于您。您甚至可以嵌套row和col类，因为您希望获得所需的网格。更多关于引导网格这里的信息。

示例：

<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-块并添加col类以自动获取列，如下所示：

<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>