twitter启动搜索框和按钮allignment“google like” [英] twitter bootstrap search box and buttons allignment "google like"

问题描述

我想为我的新博客项目使用twitter bootstrap，我想让搜索框工作。为此，我使用以下代码：

I am trying to use twitter bootstrap for my new blog project, and I am trying to get the search box to work. To this end, I am using the following code:

<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），但我不能实现这一点。

However, what this does is layout the "search button" next to the search box which is not what I'd like. I'd want it looking similar the google landing page, with 2 buttons on the bottom of the box and aligned "centre" to the box. I tried many different options (like a separate div), but I am not able to achieve this.

其次，如同在google着陆页，我想要偏移行，如果可能，将其对齐（框和两个按钮）在页面的中心。同样，我很难找出如何偏移行（但我可以抵消列）。

Secondly, as in the google landing page, I'd want to offset rows, to align it(the box and the two buttons) in the center of the page if possible. Again, I am struggling to figure out how to offset rows (but I am able to offset columns).

我会感激任何指导。感谢您的时间。

I'd appreciate any guidance on this. Thanks for your time.

推荐答案

Twitter Bootstrap仅通过类别将样式应用于HTML。您可以使用自己的CSS风格的内容。我没有测试下面的解决方案，所以不要指望它工作正确的盒子（虽然，如果它，确实让我知道）。我已经广泛地评论过，让你知道我在每一步都想达到什么。

Twitter Bootstrap only applies styling to your HTML via their classes. You can style your content using your own CSS too. I haven't tested the solution below, so don't expect it to work right out the box (although, if it does, do let me know). I have commented extensively to give you an idea of what I'm trying to achieve with every step.

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的。

p.s: apologies for the ridiculous selector. You didn't have explicit class names or id tags that weren't Twitter's.

这篇关于twitter启动搜索框和按钮allignment“google like”的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！