如何取回按钮的边框半径：

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

现在，这是我得到的：

注意左边的按钮边缘是不是圆角？ 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>

Answer 2

目前bootstrap将边框左边和底边半径设置为0.你只需要覆盖它们。

.input-group-btn:last-child>.btn {
border-bottom-left-radius: 5px;
border-top-left-radius: 5px;
}

当我将上述代码添加到您的代码时，它就是这样：https://jsfiddle.net/kjvhqqz5/

Image of fixed button

Answer 3

我会避免使用input-group-btn，因为你将不得不在设计中使用。

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;