Question

我正在尝试对齐以将选择框和文本框水平对齐在一行上。我尝试在css上使用内联，但它不起作用。

<div class="control-group span6">

<label for="trp_code">Transporter: </label>

<select class="form-control" name="trp_code" id="trp_code" title="Transporter" style="width: 350px;">

</select>



<label for="lrno">LR No: </label>

<input type="text" class="form-control" id="lrno" name ="lrno" size='10' style="width:100px;" onblur ="notempty(this.value)">

<label for="lrdate">LR Date: </label>

<input type="text" class="form-control"  name ="lrdate" id="lrdate" style="width:100px;" value="<?php echo date("Y-m-d"); ?>" class="calendar" title="LR Date">

</div></td>

Answer 1

您可以使用Bootstrap网格系统将Select和TextBox对齐在一行中。请参阅链接https://www.w3schools.com/bootstrap/bootstrap_grid_system.asp

Answer 2

为此，您可以使用Bootstrap Inline form。详细信息click here

Answer 3

这段代码怎么样：

<div class="control-group span6 container row">
    <div class="form-group">

        <div class="col-md-4">
            <label for="trp_code" class="control-label">Transporter: </label>
            <select class="form-control" name="trp_code" id="trp_code" title="Transporter" style="width: 350px;"></select>
        </div>
        <div class="col-md-3">
            <label for="lrno" class="control-label">LR No: </label>
            <input type="text" class="form-control" id="lrno" name="lrno" size='10' style="width:100px;" onblur="notempty(this.value)">
        </div>
        <div class="col-md-2">
            <label for="lrdate" class="control-label">LR Date: </label>
            <input type="text" class="form-control" name="lrdate" id="lrdate" style="width:100px;" value="">
        </div>
    </div>
</div>

你可以解决这个问题..

Bootstrap-如何在一行上水平对齐选择和文本框？

3 个答案: