html - 为什么这种形式在放置在 Bootstrap Jumbotron 中时会破裂？

Question

我有一个表单，当它被放置在 Bootstrap Jumbotron 中时它就坏了。

需要做什么才能正常工作？

代码

    <div class="container">
      <div class="col-sm-6 col-sm-offset-3 well well-sm">
        <h3><i class="fa fa-rocket"></i> Quick Connect</h3>

        <form class="form" role="form" action="chat" method="post">
        <fieldset>

        <div class="input-group">
          <input name="nickname" type="text" placeholder="Enter a nickname, be creative!" class="form-control">
          <span class="input-group-btn">
            <button class="btn btn-default" type="submit">Enter Chat</button>
          </span>
        </div>

        </fieldset>
        </form>

      </div>
    </div>

超大屏幕外

超大屏幕内部

谢谢

史蒂夫

编辑:有人还可以提供一个如何解决这个问题的例子吗？

Answer 1

这是因为 jumbotron 覆盖了 btn-default 来扩大它。您可以尝试将其更改为 btn-small 并查看是否可以提供所需的结果。如果没有，您可以定义一个新的 css 类并复制普通样式。