Bootstrap：如何将按钮放置在输入组旁边 [英] Bootstrap: How to place button next to input-group

问题描述

我无法解决（遵守正确的引导程序）如何让按钮坐在div内的输入组旁边。

I can't work out (conforming to "proper bootstrap") how to get a button to sit next to an input-group within a div.

他们需要中心对齐。

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

This is what I want it to look like...

这就是发生的事情...

This is what is happening...

这是我目前的代码。

Here is my current code.

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

I have created this js fiddle... https://jsfiddle.net/ptwbn2av/

谢谢！

推荐答案

您也可以尝试

You could also try the pull-left class.

类.pull-left和.pull-right也存在，并且以前作为媒体组件的一部分使用
，但从v3.3.0开始使用
时不推荐使用。它们大约相当于.media-left和
.media-right，除了.media-right应该放在html中的
.media-body之后。

The classes .pull-left and .pull-right also exist and were previously used as part of the media component, but are deprecated for that use as of v3.3.0. They are approximately equivalent to .media-left and .media-right, except that .media-right should be placed after the .media-body in the html.

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>

您可以使用：

You can use:

style="margin-right:5px"

div，然后新的加价如下：

to add some spacing after the div, and then the new mark-up would be as follows:

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

这篇关于Bootstrap：如何将按钮放置在输入组旁边的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！