Question

我需要做一些非常简单的事情但是好几天我都在努力，但没有运气。我需要做这样的事情：

所以我需要一个输入，空格，两个输入彼此相邻，空格，一个按钮。

<div class="container">
    <form class="form-inline">
        <div class="form-group">

            <div class="input-group">
                <input type="text" class="form-control" placeholder="field1"/>
            </div>


            <div class="input-group">
                <input type="text" class="form-control" placeholder="field2"/>
                <input type="text" class="form-control" placeholder="field3"/>
            </div>


        </div>


        <button type="submit" class="btn btn-success">My button</button>
    </form>

    </div>

它给出了这个：

我不知道我做错了什么。

感谢您的任何想法。

C.C。

Answer 1

我认为你不能在一个组中有两个输入。这是一个不那么干净的方法，但它有效：http://www.bootply.com/B4GIyi2E2l

<div class="input-group">
                <input type="text" class="form-control" placeholder="field1">
            </div>


             <div class="input-group">
                <input type="text" class="form-control" placeholder="field1">
            </div>

          <div class="input-group" style="margin-left:-10px">
                <input type="text" class="form-control" placeholder="field1">
            </div>

或者您可以使用内联样式以这种方式尝试：

http://www.bootply.com/RkhHZbahVE

Answer 2

Here是关于该问题的官方指南：

<div class="input-group mb-3">
  <div class="input-group-prepend">
    <label class="input-group-text" for="inputGroupSelect01">Options</label>
  </div>
  <select class="custom-select" id="inputGroupSelect01">
    <option selected>Choose...</option>
    <option value="1">One</option>
    <option value="2">Two</option>
    <option value="3">Three</option>
  </select>
</div>

<div class="input-group mb-3">
  <select class="custom-select" id="inputGroupSelect02">
    <option selected>Choose...</option>
    <option value="1">One</option>
    <option value="2">Two</option>
    <option value="3">Three</option>
  </select>
  <div class="input-group-append">
    <label class="input-group-text" for="inputGroupSelect02">Options</label>
  </div>
</div>

<div class="input-group mb-3">
  <div class="input-group-prepend">
    <button class="btn btn-outline-secondary" type="button">Button</button>
  </div>
  <select class="custom-select" id="inputGroupSelect03">
    <option selected>Choose...</option>
    <option value="1">One</option>
    <option value="2">Two</option>
    <option value="3">Three</option>
  </select>
</div>

<div class="input-group">
  <select class="custom-select" id="inputGroupSelect04">
    <option selected>Choose...</option>
    <option value="1">One</option>
    <option value="2">Two</option>
    <option value="3">Three</option>
  </select>
  <div class="input-group-append">
    <button class="btn btn-outline-secondary" type="button">Button</button>
  </div>
</div>

Boostrap输入组内的多个输入

2 个答案: