15

我正在使用基本文件上传 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

4 回答 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>
于 2014-05-15T21:42:38.627 回答
13

尝试这个：

  1. 从表单中删除类“form-inline”
  2. 将类“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>
于 2013-09-10T00:34:54.913 回答
5

您可以使用“navbar-form”类将其包装在 div 中。这会将所有内容都内联。

于 2015-07-17T20:56:54.440 回答
0

一种选择是覆盖display:block;类表单控件的样式。我在以下回复中发布了示例代码：

bootstrap：将输入与按钮对齐

于 2016-08-11T01:22:34.863 回答