Question

您好我尝试使用类input-ol在输入字段中获取搜索按钮，但它无法正常工作。我正在编写以下代码。

<form id="search_form" onsubmit="return false;">
                <div class="input-group">
                    <input type="text" class="input-ol" name="query" placeholder="Ex: cars, watches, exercise... "/>
                    <span class="input-group-btn" onclick="return searchcontent()">
                        <button class="btn btn-outline-primary" type="button" aria-label="Search">
                            <i class="fa fa-search fa-2x" aria-hidden="true"></i>
                        </button>
                    </span>
                </div>
</form>

The output looks like this

Answer 1

我认为您需要将类form-control添加到输入元素才能使其正常工作。

＆＃13;

.input-group input.input-ol {
  border-radius: 50px;
}

button.rounded {
  border-radius: 10px 50px 50px 10px;
}

＆＃13;

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>

<div class="row">
  <div class="col-lg-6">
    <form id="search_form" onsubmit="return false;">
      <div class="input-group">
        <input type="text" class="input-ol form-control" name="query" placeholder="Ex: cars, watches, exercise... " />
        <span class="input-group-btn" onclick="return searchcontent()">
          <button class="btn btn-outline-primary btn-primary rounded" type="button" aria-label="Search">
            <i class="fa fa-search" aria-hidden="true"></i> 
           </button>
         </span>
      </div>
    </form>
  </div>
</div>

＆＃13;

我还从图标元素中删除了课程fa-2x，只是为了让代码片段正常工作，但如果您有其他样式可以让较大的按钮与您的输入字段一起使用，那么您可能无法删除那个班。

如何在mdbootstrap中的输入字段内获取搜索按钮？

1 个答案: