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>

Twitter Bootstrap输入字段

2 个答案: