Question

我无法解决（符合＆＃34;正确的引导程序＆＃34;）如何让按钮坐在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-left和.pull-right也存在并且之前是用作媒体组件的一部分，但不推荐用于该用途从v3.3.0开始。它们大致相当于.media-left和.media .media-right，除了.media-right应放在.media之后 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

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

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

会导致：

Hello World!

Goodbye World!

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

您可以向css添加规则：

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

当然，你应该为按钮添加一个id属性。

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

Answer 4

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

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

Answer 5

尝试在根div中使用form-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>

Answer 6

你可以放

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

Answer 7

这里有一个解决问题的方法。

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

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>

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

8 个答案: