Bootstrap btn-block 不起作用

Question

我正在尝试展开提交按钮，使其与密码字段的大小相同。我正在使用代码 btn-block 但它不起作用。

<div class="container">
  <div class="row" style="margin-top:60px;">
    <div class="col-md-4 col-md-offset-4">


      <div class="span12" style="text-align:center; margin: 0 auto;">
        <form class="form-horizontal" style="width: 400px; margin: 0 auto;" method="post">
          <fieldset>
            <h3 style="color:dimgray;" class="sign-up-title">
              Bem-vindo de volta! Efetue seu login
            </h3>
            <hr class="colorgraph">
            <legend>
              Efetue seu login
            </legend>
            <div style='display:none'>
              <input type='hidden' name='csrfmiddlewaretoken' value='ImQqDNXbmiVQKGo3OsZlrepAzwfAu70B' />
            </div>
            <tr>
              <th>
                <label for="id_username">
                  Usuário:
                </label>
              </th>
              <td>
                <input id="id_username" type="text" name="username" maxlength="30" />
              </td>
            </tr>
            <tr>
              <th>
                <label for="id_password">
                  Senha:
                </label>
              </th>
              <td>
                <input type="password" name="password" id="id_password" />
              </td>
            </tr>

            <div  class="buttonHolder">
              <input type="submit" value="Entrar" class="btn btn-large btn-success btn-block" id="submit-login"/>
            </div>
          </fieldset>
        </form>
      </div>
    </div>
  </div>
</div>

Answer 1

在 Bootstrap 5.0.x 中，btn-block已折旧，要获得全宽按钮，您可以使用网格系统并col-12在按钮类中使用。

您可以从bootstrap 文档页面查看文档

Answer 2

来自谷歌的人，只需添加w-100到您的按钮即可使其全宽（btn-block过去的工作方式）：

<button type="submit" class="btn btn-primary w-100">Login</button>

Answer 3

将 w-100 添加到按钮类后即可工作。

<button type="submit" class="btn btn-primary w-100">Login</button>

Answer 4

为什么不遵循 Bootstrap 5 的官方文档

只需在外部 div 中添加 d-grid 类

d-grid

完整语法

 <div class="row mb-3">
     <div class="d-grid">
       <button class="btn btn-primary">Submit</button>
     </div>
 </div>

Answer 5

该类btn-block是一个组合display: block是和width: 100%，因此我们必须使用d-block w-100类。当然，如果必须使用 \xe2\x80\x8d\xe2\x80\x8d\xe2\x80\x8d\xe2\x80\x8d\xe2\x80\x8d\xe2\x80\x8d\xe2\x80\ x8d\xe2\x80\x8d display: block\xe2\x80\x8d，否则w-100就足够了

\n

<div class="buttonHolder">\n    <input type="submit" value="Entrar" class="btn btn-large btn-success w-100 d-block" id="submit-login"/>\n</div>\n

\n

Answer 6

将显示值设置为内联块，它应该可以工作。