logo标签列表

使用Bootstrap将文本输入框和按钮放在同一行

twitter-bootstrap
16

我正在使用基本的文件上传bootstrap-fileupload.js来获取文件名和按钮，并且希望以文本输入框和按钮的格式重复此格式。

<div class="form-group">
    <label class="control-label">Source File Name</label>
    <div class="fileupload fileupload-new" data-provides="fileupload">
        <div class="input-group">
            <div class="form-control uneditable-input"><i class="icon-file fileupload-exists"></i> 

            </div>
            <div class="input-group-btn">
                <a class="btn btn-default btn-file">
                    <span class="fileupload-new">Select file</span>
                    <span class="fileupload-exists">Change</span>
                    <input type="file" class="file-input"/></a>
                <a href="#" class="btn btn-default fileupload-exists" data-dismiss="fileupload">Remove</a>
            </div>
        </div>
    </div>
 </div>
 <form id="frmOptions" method="post" class="form-inline span12">

 <div class="row-fluid">   
<div class="form-group">
    <label class="control-label">File Name on Upload</label>
    <div class="input-group ">
        <input id="uploadname" type="text" class="form-control">
        <a class="btn btn-default go inline">Upload to DocMan</a>
    </div>
</div>

</div>
</form>

页面托管在这里 https://googledrive.com/host/0B90FGJizRd-gbm1JRUswYUY5dE0/bootstrap/ 我已经尝试过多种方法，但都没有效果。基本上，我想要两个外观相似的全宽度行，每个行都有一个文本字段和一个按钮。欢迎任何建议。

4个回答
19

您使用输入组

<div class="input-group">
      <input type="text" class="form-control">
      <span class="input-group-btn">
        <button class="btn btn-default" type="button">Go!</button>
      </span>
    </div>
6
嗯，这对我没用...按钮跳到了新的一行。 - sports
注意：此代码适用于Bootstrap 3。如果无法正常工作，请检查您是否使用较旧的Bootstrap版本。 - user1438038
14

试试这个：

  1. 从表单中移除"class=form-inline"
  2. 将按钮添加"class=input-group-btn"

生成的html代码：

<form id="frmOptions" method="post" class="span12">
    <div class="row-fluid">   
        <div class="form-group">
            <label class="control-label">File Name on Upload</label>
            <div class="input-group">
                <input id="uploadname" type="text" class="form-control">
                <a class="input-group-btn btn btn-default go inline">Upload to DocMan</a>
            </div>
        </div>
    </div>
</form>
4
我可以帮助你翻译成中文。原文是“This makes the button float all the way to the right. How can I force it to stay next to the text input?”。我的翻译是“这会让按钮浮动到最右边，我该如何强制它停留在文本输入框旁边？” - Daniel Gabriel
5
您可以将其包装在具有“navbar-form”类的div中。这将使所有内容都内联显示。
0
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接