Bootstrap 如何阻止提交按钮堆叠在引导表单的文本字段下？

ds97pgxw 于 2022-12-07 发布在 Bootstrap

关注(0)|答案(4)|浏览(158)

http://codepen.io/anon/pen/WQQpyg
在大屏幕上这不是问题，但是当我缩小浏览器窗口时，提交按钮移到了文本字段下面。当我尝试用css为表单添加背景颜色时，这会导致问题。有人知道如何防止这种情况吗？

<head>
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
</head>

<body>
    <div>
      <form class="form-inline" role="form">
        <div class="form-group">
          <input type="email" class="form-control" id="email" placeholder="Enter Email Address">
        </div>
        <button type="submit" class="btn btn-default">Submit</button>
      </form>
    </div>
</body>

twitter-bootstrap

来源：https://stackoverflow.com/questions/32509783/how-can-i-stop-the-submit-button-from-stacking-under-the-text-field-on-a-bootstr

4条答案

按热度按时间

gywdnpxw1#

这是你要找的吗？https://jsfiddle.net/DIRTY_SMITH/2zkwxm97/
将col-xs-4添加到<div class="form-group col-xs-4">

赞(0）回复(0）举报 2022-12-07

eqoofvh92#

您可以使用水平表单调整栏大小。
第一个
Another solution的情况下，可以使用该方法。
以下是它的运作方式：
第一次

赞(0）回复(0）举报 2022-12-07

r7xajy2e3#

类.form-inline仅适用于 windows 内宽度至少为768px的窗体。
在此处检查 Bootstrap 文档
为了达到你想要的，你不应该使用它。你可以这样做：

<div>
  <form>
    <div class="col-xs-6">
      <input type="email" class="form-control" id="email" placeholder="Enter Email Address">
    </div>
    <button type="submit" class="btn btn-default">Submit</button>
  </form>
</div>

检查此demo

赞(0）回复(0）举报 2022-12-07

oipij1gg4#

看起来它使用了如下的媒体查询：

@media (min-width: 768px)

任何比这更窄的东西，form-group都会变成display:block而不是inline-block。所以也许会覆盖回inline-block，但不确定这是解决问题的最好方法。也许让它像这样堆叠，然后找到另一种方法来解决背景颜色问题。

赞(0）回复(0）举报 2022-12-07

我来回答

Bootstrap 如何阻止提交按钮堆叠在引导表单的文本字段下？

4条答案

相关问题

热门标签

最新问答