Question

我从网站上看到的很漂亮。

我决定使用Bootstrap 4进行创建，但是由于两个html输入元素之间的间隔而失败。它既不是填充也不是边缘，我不知道这是什么。我试图多次删除空间，但失败了。

两个输入之间的空格给我带来痛苦。

这是HTML

<form action="" method="post">
     <div class="form__wrapper">
          <input type="email" name="email" class="newsletter" placeholder="Email address"/>
           <input type="submit" class="newsletter__button"/>
      </div>
  </form>

这是CSS

 .form__wrapper {
    display: inline-block;
    position: relative;
}

form {
    display: block;
}

form input[type='email'], form input[type='text'] {
    cursor: text;
   -webkit-font-smoothing: antialiased;
    width: 100%;
    padding: 9px;
    border: 1px solid #E1E0E1;
    outline: none;
    -webkit-border-radius: 0;
    border-radius: 0;
    -webkit-appearance: none;
    -moz-appearance: none;
}
.form__wrapper input[type='email'] {
    width: 60%;
}

Answer 1

此间隙源自源代码中两个内联元素之间的空间。解析为空白。

但是，您不必处理此问题-对于这种情况，Bootstrap提供了Input Groups。只需将input-group类用作两个表单元素的包装器，并将input-group-added用作按钮的包装器。

您可以通过在选择器中使用higher specificity来设置表单元素的样式。 Icon也可以通过FontAwesome来实现（有关此信息，请参见Nisarg Shahs的好答案）。这是一个示例：

body {
  padding: 2em;
}

.input-group>.form-control,
.input-group .btn {
  border-radius: 0;
  border-color: #e3e3e3;
  text-transform: uppercase;
  font-size: .8em;
  line-height: 1.95em;
  letter-spacing: 2px;
}

.input-group>.form-control {
  border-right: 0;
}

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet" />
<div class="input-group">
  <input type="email" class="form-control" placeholder="Email Address" aria-label="Email Address" aria-describedby="basic-addon2">
  <div class="input-group-append">
    <button class="btn btn-outline-secondary" type="button">&gt;</button>
  </div>
</div>

Answer 2

在Bootstrap 4中它称为add-on。下面是一个示例：

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<div class="input-group mb-3">
  <input type="email" name="email" placeholder="Email address" class="form-control" aria-label="Dollar amount (with dot and two decimal places)">
  <div class="input-group-append">
    <button class="btn btn-outline-secondary">Submit</button>
  </div>
</div>

您可以将其与FontAwesome结合使用，以获得所需的结果：

<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">


<div class="input-group mb-3">
  <input type="email" name="email" placeholder="Email address" class="form-control" aria-label="Dollar amount (with dot and two decimal places)">
  <div class="input-group-append">
    <button class="btn btn-outline-secondary">
      <span class="fa fa-angle-right"></span>
    </button>
  </div>
</div>

Answer 3

Bootstrap具有此内置功能：

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet"/>

<div class="input-group">
  <input class="form-control newsletter" placeholder="Email" type="text">
  <div class="input-group-append">
    <input class="form-control"t type="submit" class="newsletter__button"/>
   </div>
</div>

Answer 4

将两个输入标签都写在同一行中。在这里，我包含了fiddle。您可以看到区别。：）

<input type="email" name="email" class="newsletter" placeholder="Email address"/><input type="submit" class="newsletter__button"/>

HTML：使用引导程序

4 个答案: