0

我正在使用引导程序来设计我的网站。

我注意到这样做时：

 <form class="form-search  navbar-search pull-right">
                <div class="input-append input-prepend">
                    <span class="add-on"><i class="icon-search"></i></span>
                    <input id="searchQuery" class="search-query" type="search" placeholder="Rechercher" />
                    <a class="btn add-on" href="#">Rechercher</a>
                </div>

输入文本框仍然在左侧四舍五入。查看css时不应该是这种情况：

.form-search .input-append .search-query,
.form-search .input-prepend .search-query {
 -webkit-border-radius: 0;
 -moz-border-radius: 0;
      border-radius: 0;

}

难道我做错了什么 ？

4

2 回答 2

1

您可以通过以下方式创建表单：

Jsfiddle 演示

<form class="form-search  navbar-search pull-right">
<div class="input-append input-prepend"> <span class="add-on"><i class="icon-search"></i></span>

<input id="searchQuery" type="search" placeholder="Rechercher" /> <div class="btn-group">
            <button  class="btn">Rechercher</button>

          </div>

  </form>

他们已经定义了border-radius 0，因此不需要额外的类来附加输入来设置border-radius 0：

.input-prepend.input-append input, .input-prepend.input-append select, .input-prepend.input-append .uneditable-input {

border-radius: 0 0 0 0;

   }
于 2013-03-06T09:28:56.907 回答
1

您的课程“.search-query”的问题

包括风格..

.form-search .input-prepend .search-query {
    border-radius: 0 14px 14px 0;
}

删除搜索查询类

于 2013-03-06T09:32:49.480 回答