html - 如何阻止提交按钮堆叠在 Bootstrap 表单的文本字段下方?

标签 html css twitter-bootstrap

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>

最佳答案

这是您要找的吗? https://jsfiddle.net/DIRTY_SMITH/2zkwxm97/

已添加 col-xs-4<div class="form-group col-xs-4">

关于html - 如何阻止提交按钮堆叠在 Bootstrap 表单的文本字段下方?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/32509783/

相关文章:

html - col-sm-4 高度自举

css - 如何在悬停时正确定位 SVG 符号路径?

jquery - 管理表单组上的元素溢出

css - Bootstrap 导航栏下拉按钮

html - Bootstrap 4 Bottom Navbar 无法删除左右​​边距

html - 邮箱——如何模拟绝对定位

javascript - UWP:webview不使用navigateToString方法显示页面

css - 在(背景)图像周围制作不透明边框

javascript - 在 wordpress 帖子中使用 ajax 提取 HTML 内容

javascript - 尝试制作轮播 slider