html - 输入带有右侧按钮的文本字段，而不是使用引导程序堆叠在移动设备中

Question

我试图达到这种效果一段时间但没有成功。需要使用引导类在桌面和移动视图中文本字段右侧的搜索表单按钮。无论我做什么，按钮总是出现在文本字段的底部。我需要将文本字段 + 按钮都集中在桌面和移动视图中。

<header class="jumbotron masthead mastheadcstm">
  <div class="container">
    <div class="row-fluid">
      <div class="offset3 span6 offset3">
        <form>
          <input type="text" placeholder="Engineer etc etc">
          <button type="submit" class="btn btn-primary">Search!</button>
        </form>
      </div>
    </div>
  </div>
</header>

Answer 1

像这样

演示

CSS

  .offset3{
        text-align:center;
    }

Answer 2

您可以尝试通过在规则中使用更多的类名、属性和 id 来强制所需的规则“高于”其他规则：

.jumbotron.masthead.mastheadcstm form{
    text-align:center;
}

或者简单地通过向属性添加!important关键字：

.jumbotron form{
    text-align:center !important;
}

这两种方法都提高了属性的特异性，这应该使其覆盖规则竞争对手中的相应属性。

---

或者您可以尝试使用带有 Firebug 的 Firefox（您需要安装此扩展程序）或 Google Chrome 控制台（按 F12 激活它）来查找罪魁祸首。