Question

我在MVC视图中有这个

<form id="fileupload" action="@Url.Action("Save")" method="POST" enctype="multipart/form-data">
<div class="container">
    <div class="row">
        <div class="form-group">
            <label for="datepicker1">Invoice Date</label>
            <div class='bfh-datepicker' id='datepickerDiv'>
                <input type='text' id="datepicker1" class="form-control" />
            </div>
         </div>

        <div class="form-group">
            <label for="InvoiceNumberTB">Invoice Number</label>
            <input type="text" class="form-control" id="InvoiceNumberTB" />
        </div>

        <div class="form-group">
            <label for="NetAmountTB">Net Amount</label>
                <input type="text" id="NetAmountTB" class="form-control text-right" placeholder="0.00" />
        </div>

        <div class="form-group">
            <label for="TaxAmountTB">Sales Tax</label>
            <input type="text" id="TaxAmountTB" class="form-control text-right" placeholder="0.00" />
        </div>

        <div class="form-group">
            <label for="InvoiceTotalTB">Invoice Total</label>
            <input type="text" id="InvoiceTotalTB" class="form-control text-right" placeholder="0.00" />
        </div>

        <div class="form-group">
            <label for="InvoiceDescriptionTB">Description</label>
            <input type="text" id="InvoiceDescriptionTB" class="form-control" />
        </div>

        <div class="form-group">
            <label for="DocumentUploadTB">Optional - Upload Invoice (PDF)</label>
            <span class="btn btn-success fileinput-button">
                <span>Add File...</span>
                <input type="file" id="DocumentUploadTB" class="form-control" />
            </span>
        </div>

        <div class="form-group">
            <button type="submit" class="btn btn-primary"><span class="glyphicon glyphicon-plus-sign"></span>  Save</button>
        </div>

    </div>
</div>

但是文件上传的标签并没有像我希望的那样格式化（在其他字段的顶部），但看起来像这样

enter image description here

有人能指出我正确的方向吗？

由于

Answer 1

在form-control-static div中的标签后面包装内容并丢失form-control上的input课程：

    <div class="form-group">
        <label for="DocumentUploadTB">Optional - Upload Invoice (PDF)</label>
        <div class="form-control-static">
            <span class="btn btn-success fileinput-button">
                <span>Add File...</span>
                <input type="file" id="DocumentUploadTB" />
            </span>
        </div>
    </div>

Answer 2

您希望btn span显示为块元素。尝试添加display: block;样式，或使用像.show这样的简单引导实用程序类：

<div class="form-group">
    <label for="DocumentUploadTB">Optional - Upload Invoice (PDF)</label>
    <span class="btn btn-success fileinput-button show">
        <span>Add File...</span>
        <input type="file" id="DocumentUploadTB" class="form-control" />
    </span>
</div>

示例：http://codepen.io/kspearrin/pen/PqpgYq

Bootstrap MVC中的文件上载格式

2 个答案: