css - 如何取回按钮的边框半径 :

Question

我有这个 HTML:

 <div class="input-group">
  <input type="email" placeholder="Your email" class="form-control input-lg" name="email">
   <span class="input-group-btn input-space">
     <button type="submit" class="btn btn-success btn-lg inline input-space">Join</button>
   </span>
 </div>

input-space 是:

.input-group-btn.input-space {
  padding-left: 15px;
}

现在，这是我得到的:

注意左边，按钮边缘不是圆 Angular 的？这似乎是 Bootstrap 应用于 input-group-btn 的一些规则，因为它期望输入和按钮之间没有空格。我怎样才能删除它，使按钮在左侧具有圆形边缘，与右侧的边缘相同？我使用 Bootstrap 3。

Answer 1

您只需重新应用边框半径:

.input-group-btn.input-space:last-child>.btn {
  border-radius: 4px;
}

.input-group-btn.input-space {
  padding-left: 15px;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<div class="input-group">
  <input type="email" placeholder="Your email" class="form-control input-lg" name="email">
  <span class="input-group-btn input-space">
     <button type="submit" class="btn btn-success btn-lg inline input-space">Join</button>
   </span>
</div>