Question

我在引导表单输入组中有两个按钮。我不想触摸按钮，所以我减小了按钮的尺寸，并向左和向右浮动。

尺寸已减小，但由于未知原因，它们没有浮动。

如果我将浮动元素从输入组中删除，则该浮动元素会起作用，但是单击它们时，它们将不再与表单一起使用。

如何在bootstrap4表单输入组中的按钮上使用float或类似的CSS命令？

<div class="justify-content-center">
    <div class="input-group col-sm-6 mx-auto mb-2">
      <div class="input-group">
        <button id="wechat"  type="submit" class="btn btn-lg btn-block btn-primary mt-2 float-left disabled" style="width:49%;" name="method" value="wechat">WeChat</button>
        <button id="paypal" type="submit" class="btn btn-lg btn-block btn-primary mt-2 float-right" style="width:49%;" name="method" value="paypal">PayPal</button>
      </div>
    </div>
  </div>

Answer 1

因此，在理想情况下，您希望其中一个按钮在左侧，而另一个在右侧？或者您只是不想触摸按钮？

从阅读您的问题开始，听起来主要的问题就是按钮处于触摸状态，在这种情况下，您只需在样式中添加填充即可。所以...

<div class="justify-content-center">
    <div class="input-group col-sm-6 mx-auto mb-2">
      <div class="input-group">
        <button id="wechat"  type="submit" class="btn btn-lg btn-block btn-primary mt-2 float-left disabled" style="width:49%; padding:10px" name="method" value="wechat">WeChat</button>
        <button id="paypal" type="submit" class="btn btn-lg btn-block btn-primary mt-2 float-right" style="width:49%; padding: 10px" name="method" value="paypal">PayPal</button>
      </div>
    </div>
  </div>

您可以尝试所需的填充量，也可以尝试向右填充和向左填充。您可能还想尝试使用margin来解决此问题。这应该解决按钮触摸的问题。尝试以不同的方式对齐它们将是另一个问题，因为表单中的所有内容都包装在<div class="justify-content-center">

中

如何在bootstrap4表单输入组内的按钮上使用float或类似的CSS命令？

1 个答案: