html - 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>

但是，这样做是在搜索框旁边布置“搜索按钮”，这不是我想要的。我希望它看起来与 google 着陆页相似，在框的底部有 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;
}

p.s:为荒谬的选择器道歉。您没有不属于 Twitter 的显式类名或 ID 标签。