Bootstrap：如何将按钮放在输入组旁边

Question

我无法弄清如何在 div 中使按钮与 input-group 并排，且符合"proper bootstrap"标准。

它们需要居中对齐。

这是我想要的样子...

这是目前出现的情况...

这是我的当前代码。

<div>
    <div>
        <button type="button" class="btn">Delete</button>
    </div>
    <div>
        <div class="input-group">
            <input type="text" class="form-control" value="1" />
            <span class="input-group-addon">Update</span>
        </div>
    </div>
</div>

我已经创建了这个jsfiddle...https://jsfiddle.net/ptwbn2av/

谢谢！

- Beakie

Answer 1

你也可以尝试使用pull-left类。

类.pull-left和.pull-right也存在，并且以前作为媒体组件的一部分使用，但自v3.3.0起已弃用该用法。它们与.media-left和.media-right大致相同，但是应在html中将.media-right放置在.media-body之后。

HTML代码:

<div>
    <div class="pull-left">
        <button type="button" class="btn">Delete</button>
    </div>
    <div>
        <div class="input-group">
            <input type="text" class="form-control" value="1" />
            <span class="input-group-addon">Update</span>
        </div>
    </div>
</div>

您可以使用：

style="margin-right:5px"

在div后面添加一些间距，那么新的标记将如下所示：

<div>
    <div class="pull-left" style="margin-right:5px">
        <button type="button" class="btn">Delete</button>
    </div>
    <div>
        <div class="input-group">
            <input type="text" class="form-control" value="1" />
            <span class="input-group-addon">Update</span>
        </div>
    </div>
</div>

- rasso

---

这是目前为止最接近的了。谢谢！ - Beakie

没错，接近了但还不够 :) - Beakie

我真的不想硬编码样式。这就是我试图通过使用Bootstrap摆脱的东西。 - Beakie

我明白了，让我检查一下。午饭后回来：] - rasso

我创建了一个名为input-group-left-sibling的类，并将边距设置为5像素。结合使用pull-left，这对我来说是一个不错的解决方案。谢谢。 - Beakie

Answer 2

使用您当前的代码，可以使用flexbox。

这是一个强大的CSS布局模块，为我们提供了一种高效简单的方式来排列和对齐元素。

<div class="flex">
   <div>
     <button type="button" class="btn">Delete</button>
   </div>
   <div>
     <div class="input-group">
        <input type="text" class="form-control" value="1" />
        <span class="input-group-addon">Update</span>
     </div>
   </div>
</div>

.flex {
   display: flex;
   flex-direction: row;
}

这是结果的屏幕截图： 你可以在这里了解更多关于Flexbox的内容：https://css-tricks.com/snippets/css/a-guide-to-flexbox/ 干杯！

- Cyan Baltazar

Answer 3

是块级元素，这意味着它们垂直对齐。例如：

<div>
    Hello World!
</div>
<div>
    Goodbye World!
</div>

会产生以下结果：

Hello World!

Goodbye World!

因此，为了使元素水平流动，您必须使 div 元素成为 内联 元素，因为内联元素可以水平流动，例如文本和 <span> 元素。

您可以在 CSS 中添加以下规则：

#delete-button {
    display:inline-block;
}

当然，您应该为按钮添加id属性。

如果上述方法不起作用，您应该考虑将所有元素放在一个div中，因为<button>、<input>和<span>都是内联元素。

- Sweeper

---

这是正确的...但这不是"纯净"的bootstrap。我希望可以有一种简单使用预定义类的方法。 - Beakie

这个解释很棒，我总是在尝试水平对齐时遇到问题。谢谢。 - ricks

Answer 4

这是一个解决该问题的方案。

<div class="container">
    <div class="input-group">
        <button class="btn btn-outline-primary border-left-0 border" type="button">
            Delete
        </button>
        <input type="text" class="form-control py-2" value="1" />
        <span class="input-group-addon">Update</span>
    </div>
</div>

您可以在此链接中查看输出：codeply.com/p/xijLBe2vff。

- Hemaravishankar

---

你可以从这个链接 https://www.codeply.com/p/xijLBe2vff 检查输出。 - Hemaravishankar

Answer 5

只需添加网格类。尝试这个。

<div>
    <div class="col-xs-2">
        <button type="button" class="btn">Delete</button>
    </div>
    <div class="col-xs-10">
        <div class="input-group">
            <input type="text" class="form-control" value="1" />
            <span class="input-group-addon">Update</span>
        </div>
    </div>
</div>

https://jsfiddle.net/xbu9qtje/

- David Lemon

---

这会破坏中心对齐。顺便说一下，你的fiddle不正确。 - Beakie

这会破坏中心对齐，因为按钮大小等是“响应式”定义的。 - Beakie

Answer 6

尝试在根 `div` 中使用 `form-inline` 类，它会默认为“inline”，将您的字段放在一起：

<div class="form-inline my-2 my-lg-0">
      <button type="button" class="btn">Delete</button>
      <div class="input-group">
            <input type="text" class="form-control" value="1" />
            <span class="input-group-addon">Update</span>
      </div>
</div>

- jogarcia

Answer 7

你可以直接放置

@Html.EditorFor(model => model.Name, new { htmlAttributes = new { @disabled = "true", @class = "input-group-addon", @style = "width:50px;text-align:center;" } })

- Sheriff

Answer 8

<div class="col-md-12">
    <div class="col-md-1">
        <button type="button" class="btn">Delete</button>
    </div>
    <div class="col-md-11">
        <div class="input-group">
            <input type="text" class="form-control" value="1" />
            <span class="input-group-addon">Update</span>
        </div>
    </div>
</div>

- Salim Malik

---

如果我添加列类，居中对齐将会出错。 - Beakie