Bootstrap:如何在input-group旁边放置按钮

Question

我无法解决(符合"正确的引导程序")如何让一个按钮坐在div中的输入组旁边.

他们需要中心对齐.

这就是我想要的样子......

这就是发生的事......

这是我目前的代码.

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

我创造了这个js小提琴... https://jsfiddle.net/ptwbn2av/

谢谢!

Answer 1

你也可以尝试拉左类.

类.pull-left和.pull-right也存在,之前用作媒体组件的一部分,但从v3.3.0开始不再使用.它们大致相当于.media-left和.media-right,除了.media-right应该放在html中的.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>

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/

干杯!

Answer 3

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

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

会导致：

Hello World!

Goodbye World!

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

您可以向CSS添加规则：

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

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

如果上面没有做的工作，你应该考虑把所有的元素于一体div，因为<button>，<input>和<span>都是内联元素。