输入

Question

嗨我正在尝试创建一个输入文本字段，前面有一个十字图标。因此，如果用户点击该字段，则删除该字段。现在我正在使用bootstrap类关闭按钮标签。但结果并未到来。它需要使用bootstrap来完成。

这是我的代码：

         <div class="col-lg-7 ven" hidden="hidden">
            <label for="vendor" >Vendor</label>
    <input type="text"  class="form-control" id="vendor" placeholder="Enter Vendor" name="vendor" value="not defined">
            <button type="button" class="close" aria-label="Close">
         <span aria-hidden="true">&times;</span>
           </button>
           </div>

立即输出：

Answer 1

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" integrity="sha384-PsH8R72JQ3SOdhVi3uxftmaW6Vc51MKb0q5P2rRUpPvrszuE4W1povHYgTpBfshb" crossorigin="anonymous">

<div class="col-lg-7 ven">
		   <label for="vendor" >Vendor</label>
		 <div class="input-group margin-bottom-sm ">
		 
    <input type="text"  class="form-control" id="vendor" placeholder="Enter Vendor" name="vendor" value="not defined">
            <button type="button" class="close" aria-label="Close">
		<span class="input-group-addon">&times;</span></button>
		</div>
		</div>

在我看来，你应该使用Bootstrap的类.input-group。它解决了你的问题。

您的最终代码如上所示。

将此代码与Bootstrap一起使用，你就可以了。 我希望我可能会有所帮助。