引導列中同一行上的元素

Question

試圖在bootstrap列的同一行上獲得2個元素，因為我不希望將其放在單獨的col中會產生間隙。

<style>
   .inline {
             display: inline-block;
           }
</style>

<div class="row">
            <div class="col-md-6">
                <label class="inline">View</label>
                @Html.EnumDropDownListFor(x => x.View, new {@class = "form-control inline"})
            </div>
            <div class="col-md-4">
                @Html.DropDownListFor(x => x.SportId, Model.Sports, new {@class = "form-control"})
            </div>
</div>

輸出是這樣的：

編輯：我想你們中的許多人都誤解了我的需求。 伊斯瓦雅讓我走上了正確的道路。 只需在col中創建另一個col，如下所示：

 <div class="row">
        <div class="col-md-6">               
                <div class="col-md-2">
                    <label>View</label>
                </div>
                <div class="col-md-6">
                    @Html.EnumDropDownListFor(x => x.View, new {@class = "form-control"})
                </div>                
        </div>
        <div class="col-md-4">
            @Html.DropDownListFor(x => x.SportId, Model.Sports, new {@class = "form-control"})
        </div>
    </div>

哪個創建了：

Answer 1

請參閱此處的問題代碼，並使用引導程序，它可以節省您的時間。

<form  class="form-horizontal" id="form1 " >
                <div class="col-sm-12">
                    <div class="col-sm-6">
                    <div class="form-group">
                        <label class="control-label col-sm-6">customer Name<span class="impstar">*</span></label>
                        <div class="col-sm-6">
                            <input type="text" class="form-control" name="name" Placeholder="Enter Name" re>
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="control-label col-sm-6">pounds<span class="impstar">*</span></label>
                        <div class="col-sm-6">
                            <input type="text" class="form-control" name="name" Placeholder="Ex : 20" >
                        </div>
                    </div>


                    </div>

                    </div>
                    <div class="col-sm-6">

                    <div class="form-group">
                        <label class="control-label col-sm-6">us dollars<span class="impstar">*</span></label>
                        <div class="col-sm-6">
                            <input type="text" class="form-control" name="fname" Placeholder="Ex : Rs.60,000" >
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="control-label col-sm-6">euro dollars<span class="impstar">*</span></label>
                        <div class="col-sm-6">
                            <input type="text" class="form-control" name="fname" Placeholder="Ex : Rs.35,000" >
                        </div>
                    </div>

                    <div class="form-group text-right">

                        <input type="submit" class="btn btn-info" value="Submit ">
                    </div>
                    </div>
                </div>
                </form>

Answer 2

您也可以將.row替換為.form-row，這是我們標准網格行的一種變體，它覆蓋了默認的列裝訂線，以實現更緊湊，更緊湊的布局。

表格行

這樣嘗試

<form>
      <div class="form-row">
        <div class="form-group col-md-6">
          <label for="View>View</label>
          @Html.EnumDropDownListFor(x => x.View, new {@class = "form-control "})
        </div>
        <div class="form-group col-md-4">
          <label for="lable-text"></label>
            @Html.DropDownListFor(x => x.SportId, Model.Sports, new {@class = "form-control"})
        </div>
      </div>
    </form>

Answer 3

您的代碼中有

右側的<label>view>/label> ，對於下一個字段，沒有標簽，這就是其未對齊的原因。

<div class="col-md-4">
   @Html.DropDownListFor(x => x.SportId, Model.Sports, new {@class = "form-control"})
</div>

為此div在css之后寫

vertical-align: middle or bottom or sub

Answer 4

如果您使用引導4，則只需在div中添加mt-auto 。

 <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet"/> <style> .inline { display: inline-block; } </style> <div class="row"> <div class="col-md-6"> <label class="">View</label> <select class="form-control"> </select> </div> <div class="col-md-4 mt-auto"> <select class="form-control"> </select> </div> </div>