twitter-bootstrap - Twitter Bootstrap 输入字段

Question

在http://twitter.github.com/bootstrap/base-css.html#forms中，以下代码提供了样式精美的输入字段，其中按钮相互连接。

<div class="input-append">
  <input class="span2" id="appendedInputButton" type="text">
  <button class="btn" type="button">Go!</button>
</div>

我的问题是如何在具有相同样式的按钮之前有两个相邻的输入字段（两者之间没有双边框）

我试着做

<div class="input-append">
  <input class="span2" id="appendedInputButton" type="text">
  <input class="span2" id="appendedInputButton" type="text">
  <button class="btn" type="button">Go!</button>
</div>

但造型坏了。

Answer 1

我希望下面的代码会有所帮助..

#appendedInputButton2{
  border-left:0;
}

<div class="input-append">
  <input class="span2" id="appendedInputButton1" type="text">
  <input class="span2" id="appendedInputButton2" type="text">
  <button class="btn" type="button">Go!</button>
</div>

Answer 2

如果您使用的是引导程序，那么按钮组就是您要寻找的东西：

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">

<div class="btn-group" role="group" aria-label="Basic example">
  <button type="button" class="btn btn-secondary">Left</button>
  <button type="button" class="btn btn-secondary">Middle</button>
  <button type="button" class="btn btn-secondary">Right</button>
</div>