引导列中同一行上的元素

Question

尝试在引导程序列的同一行上获取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 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

您的代码中有

#' @useDynLib example_dll #' @useDynLib testwithdll2 #' @export timestwo <- function(n){ .C("mydouble",n, PACKAGE = "testwithdll2")[[1]] } 位于右侧，对于下一个字段，没有标签，这就是其未对齐的原因。

<label>view>/label>

为此div在CSS之后写

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

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>