引导 btn 块不起作用答案

【问题标题】：Bootstrap btn-block not working引导 btn 块不起作用
【发布时间】：2014-06-04 16:30:57
【问题描述】：

我正在尝试扩展提交按钮，使其与密码字段相同。我正在使用代码 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>

【问题讨论】：

btn-block 使按钮成为块级元素。这使它跨越其父级的宽度。现在是什么样子？
问题出在哪里？它工作正常。
请问你为什么使用<tr> & <th> 标签？
我正在使用 django 通用视图。他创造了这些 tr th。
找到解决方案了吗？

标签： twitter-bootstrap-3 django-generic-views

【解决方案1】：

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>

【讨论】：

【解决方案2】：

尝试在课堂内使用 w-100 像这样<button type="submit" class="btn btn-primary w-100">Login</button>

【讨论】：

您的答案可以通过额外的支持信息得到改进。请edit 添加更多详细信息，例如引用或文档，以便其他人可以确认您的答案是正确的。你可以找到更多关于如何写好答案的信息in the help center。

【解决方案3】：

为什么不关注 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>

【讨论】：

【解决方案4】：

使用“col-12”或使用“w-100”。两者都可以使按钮相对于其容器全宽。

【讨论】：

【解决方案5】：

将 w-100 添加到按钮类后即可使用。

【讨论】：

【解决方案6】：

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

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

【讨论】：

这不能正常工作，因为它没有考虑按钮的填充 - 使内部宽度为 100%，而填充将添加到它的顶部，使按钮得到超出范围。

【解决方案7】：

或者尝试以下方法：

<a href="#" class="btn btn-success btn-toolbar d-flex justify-content-center">Confirm</a>

【讨论】：

【解决方案8】：

简单的方法就是将 col-12 赋给 btn 类

【讨论】：

【解决方案9】：

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

你可以查看bootstrap documentation page的文档

【讨论】：

如果它不起作用，它可能已被删除。已弃用意味着它仍然存在，将来会被删除。

【解决方案10】：

您可以使用.col-bg-12 类，它的工作方式与块相同。我遇到了同样的问题，但使用它解决了它，所以希望它对你也有帮助。

【讨论】：

【解决方案11】：

btn-block 引用它们的父级（带有 class="buttonHolder" 的 div），它们的大小与“Entrar”字词相匹配。

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

因此，删除它们的 div（带有 class="buttonHolder" 的 div）和带有 btn-block 的 Button 可以与密码字段具有相同的大小。

【讨论】：

【解决方案12】：

我遇到了同样的问题，即 btn-block 在引导程序 4 中的模态体中不起作用。问题是它位于<div class="col-xs-12"> 列中，并且父元素没有填充预期的 100%。修复是用col 替换col-xs-12，这样在修复<div class="col-xs-12"> 之后父级看起来像这样。根本原因是样式使用了 flexbox。为了更好地理解，请参阅此处的 bootstrap 4 文档...Bootstrap 4 Grid Documentation

对于上述的解决方案，您应该将col 类添加到buttonHolder 或将buttonHolder 替换为col completely

【讨论】：

【解决方案13】：

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

【讨论】：

【解决方案14】：

将显示值设置为 inline-block ，它应该可以工作。

【讨论】：