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>

- user3553966

---

btn-block 使按钮成为块级元素。这将使其跨越父元素的宽度。现在它是什么样子？ - Patrick Allen

哪里有问题？它运行得很好。 - Iqbal Kabir

我可以问一下，你为什么要使用 <tr> 和 <th> 标签吗？ - lozadaOmr

我正在使用Django通用视图。他创建了这些tr th。 - user3553966

你找到解决方案了吗？ - Michael Scheper

Answer 1

在Bootstrap 5.0.x中，btn-block已被弃用，如果想要获得全宽度按钮，可以使用网格系统并在按钮类中使用col-12。您可以查看Bootstrap文档页面了解更多信息。

- imjoymhnt

---

如果它不起作用，那很可能已经被删除了。"Deprecated" 的意思是它仍然存在，但将来会被移除。 - Binarian

Answer 2

如果您想让按钮占据整个宽度，可以在按钮中添加 w-100（这是以前 btn-block 的作用）：

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

- kjdion84

---

这段代码存在问题，因为它没有考虑按钮的填充 - 内部宽度设置为100%，而填充将添加在其之上，使按钮超出边界。 - Ghadir

Answer 3

在按钮类中添加w-100后，它就能正常工作了。

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

- Chidozie Duru

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>

- HadiNiazi

Answer 5

btn-block 类是 `display: block` 和 `width: 100%` 的组合，因此我们必须使用 `d-block w-100` 类。当然，如果需要使用 `display: block`，否则只使用 `w-100` 就足够了。

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

- Farhad.h

Answer 6

使用 "col-12" 或使用 "w-100"。这两种方式都可以使按钮相对于其容器的宽度为100%。

- Ed DeGagne

Answer 7

您可以在Bootstrap 5版本中使用此方法

<div class="w-100">
    <button class="btn btn-primary w-100" type="button">Button</button>
</div>

- Fahimeh Ahmadi

Answer 8

尝试在类内使用w-100，像这样 <button type="submit" class="btn btn-primary w-100">登录</button>

- hamza houri

---

你的回答可以通过提供更多支持信息来改进。请编辑以添加进一步的细节，例如引用或文档，以便他人可以确认你的答案是正确的。您可以在帮助中心中找到有关如何编写良好答案的更多信息。 - Community

Answer 9

我遇到了同样的问题，但我的 btn-block 在模态框中无法正常工作。这是因为该按钮位于 Bootstrap 4 的页脚中。一旦我将其移动到模态框的主体中，它就可以正常工作了。希望这能对某些人有所帮助。

- Paula

Answer 10

我这里也遇到了类似的情况，d-block 在 Bootstrap5 中不起作用，所以使用 w-100，会使按钮宽度占据父元素的 100%。

<button type="button" class="btn btn-outline-primary w-100 btn-lg">Sign Up</button>

- victor robin