Question

我正在使用bootstrap为我的网站设计样式。

我注意到这样做：

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

}

我做错了吗？

Answer 1

您可以按以下方式创建表单：

Jsfiddle Demo

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

   }

Answer 2

您的班级问题'.search-query'

包括样式..

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

删除搜索查询类

在表单搜索中组合input-prepend和input-append

2 个答案: