样式化Twitter Bootstrap搜索表单

时间:2012-12-12 08:49:20

标签: css twitter-bootstrap

我正在尝试使用Bootstrap构建搜索表单。这是HTML:

<form class="form-search search-bar">
  <div class="input-append">
    <input type="text" class="search-query" placeholder="Enter your address here...">
    <button type="submit" class="btn btn-primary">
    Search <i class="icon-search icon-white"></i></button>
  </div>
</form>

我是CSS的新手 - 如何设置这个样式以使搜索元素在整个块中水平居中?另外,如何增加搜索元素的高度?

2 个答案:

答案 0 :(得分:1)

您应该添加ID

.search-bar {
    text-align: center; /* centers inline and inline-block children */
}
.search-bar .search-query,
.search-bar .btn-primary {
    display: inline-block; /* allows for heights to be set */
}
.search-bar .search-query {
    height: 30px;
}
.search-bar .btn-primary {
    height: 40px;
}

答案 1 :(得分:0)

将它们放在彼此旁边,你可以使用float命令

.search-query {
  float:left;
}
.btn-primary {
  float:left;
}

确保input-append的宽度足够大,可以将它们放在一起。

增加height只是放置高度:[金额];与CSS中的float相同的块