Bootstrap - 输入组 btn 不会剪辑到输入组 [英] Bootstrap - Input-group-btn doesn't clip to input-group

问题描述

我是引导程序的新手，我正在尝试在我的网络应用程序中实现它.我想对三个不同的部分进行分组以使其看起来不错，但下面代码的结果使 浮动到浏览器的右侧.

我认为这意味着分组有效，因为它在同一行.但不知何故

仍然没有剪辑到 .我使用

解决方案

使用类pull-left，这会将它剪辑到<input/>.请参阅下面的更新代码:

<div class="input-group-addon">添加项目:
<input type="text" class="form-control input-group" placeholder="在此处输入新项目"/><div class="input-group-btn pull-left"><!-- 在此处添加 pull-left --><button type="button" class="btn btn-default ">添加</button>

I'm new to bootstrap and I'm trying to implement it in my web app. I want to group three different parts so that its looking nice, but the result of the code below makes the <button> float to the right side of the browser.

I think this means the grouping works, since its on the same row. But somehow the <button> still doesn't clip to the <input/>. I've used This bootstrap components page as a reference/example to make generate my code.

My question: How do I make the <button> "clip/snap" onto the <input/> ?

<div class="input-group">
<div class="input-group-addon">
    Add project:
</div>
<input type="text" class="form-control input-group" placeholder="Type new project here"/>
<div class="input-group-btn">
    <button type="button" class="btn btn-default ">Add</button>
</div>

This is what my result looks like (Note: contains different text, but the code is the same):

解决方案

Use the class pull-left, this will clip it to the <input/>. See updated code below:

<div class="input-group">
<div class="input-group-addon">
    Add project:
</div>
<input type="text" class="form-control input-group" placeholder="Type new project here"/>
<div class="input-group-btn pull-left"> <!-- add pull-left here -->
    <button type="button" class="btn btn-default ">Add</button>
</div>

这篇关于Bootstrap - 输入组 btn 不会剪辑到输入组的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！