输入group-btn和group-addon组

时间:2016-11-25 09:26:50

标签: twitter-bootstrap twitter-bootstrap-3

我正在尝试使用带有按钮的输入组,然后使用带有工具提示信息的插件通过glyphicon。我附上了最终结果的图像。您可以看到输入字段和按钮以及插件不在同一个(可视)组中。

有没有办法可以做到这一点,还是我应该选择其他解决方案?

这是产生结果的标记,如图所示:

<div class="form-group">
    <label class="control-label col-md-3" for="Employer_EmployerTitle">Employer</label>
    <div class="col-md-6">
        <div class="input-group">
            <input name="Employer.EmployerTitle" class="form-control text-box single-line valid" id="Employer_EmployerTitle" aria-invalid="false" style="text-transform: uppercase;" type="text" value="StackOverflow inc.">
            <div class="input-group-btn">
                <button class="btn btn-success" id="btnModalSearch" onclick="EmployerSearchModalShow()" type="button">Search</button>
            </div>
            <span class="input-group-addon">
                <span title="" class="glyphicon glyphicon-info-sign" id="toolTipSpanEmployerSearch" data-original-title="Search Employers from local database." data-toggle="tooltip" data-placement="right"></span>
            </span>
        </div>
    </div>
    <div class="col-md-3">
        <span class="field-validation-valid text-danger" data-valmsg-replace="true" data-valmsg-for="Employer.EmployerTitle"></span>
    </div>
</div>

enter image description here

1 个答案:

答案 0 :(得分:1)

尝试以下

<强> HTML

<report
    id="my_report"
    model="cars.car"
    string="Car"
    report_type="qweb-pdf"
    name="cars.my_report"
    file="views.xml"
    attachment_use="True"
    attachment="('CAR'+(object.name or '').replace('/','')+'.pdf')"
/>

Fiddle

相关问题