twitter bootstrap 搜索框和按钮对齐“google like”

Question

我正在尝试将 twitter bootstrap 用于我的新博客项目，并且正在尝试让搜索框正常工作。为此，我使用以下代码：

<div class="row">
    <div class="span8 offset2">
        <form class="well form-search">
            <input type="text" class="input-xxlarge search-query">
            <button type="submit" class="btn btn-primary">Search</button>
        </form>
    </div>
</div>

但是，这样做是在搜索框旁边布置“搜索按钮”，这不是我想要的。我希望它看起来类似于谷歌登陆页面，在框的底部有 2 个按钮，并将“中心”与框对齐。我尝试了许多不同的选项（例如单独的 div），但我无法实现这一点。

其次，就像在谷歌登陆页面中一样，我想偏移行，如果可能的话，将它（框和两个按钮）对齐在页面的中心。同样，我正在努力弄清楚如何偏移行（但我能够偏移列）。

我将不胜感激这方面的任何指导。感谢您的宝贵时间。

Answer 1

Twitter Bootstrap 仅通过其类将样式应用于您的 HTML。您也可以使用自己的 CSS 设置内容样式。我还没有测试过下面的解决方案，所以不要指望它开箱即用（虽然，如果可以，请告诉我）。我已经发表了广泛的评论，让您了解我每一步要达到的目标。

div > div:only-child > form:only-child > button[type="submit"] {
  /* clear any floating implemented by the Twitter Bootstrap framework; you may
     want to use the legacy clearfix method to make this work on all browsers */
  clear: both;

  /* redeclare the button as a block element */
  display: block;

  /* set a width (less than the width of its container; in this case, form).
     this would help with centering the button */
  width: 45%;

  /* center the button. You can use a button group if you have more buttons */
  margin: 0 auto;

  /* center the text in the button, assuming it's not already centered by twitter */
  text-align: center;
}

ps：为荒谬的选择器道歉。你没有明确的类名或不是 Twitter 的 id 标签。