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），但我无法做到这一点。

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

我很感激任何指导。谢谢你的时间。

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：为荒谬的选择者道歉。你没有明确的类名或id标签，而不是Twitter的。

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

1 个答案: