如何强制表单标签正确对齐？

Question

我有这个代码

<div class="modal-dialog text-center">
    <div class="modal-content">
        <div class="modal-body">
            <h3 class="modal-title"> Session </h3>
            <small>Enter a unique client name</small> <br><br>
            <p>

                </p><div class="form-group row">
                    <label for="sessionName" class="col-sm-6 col-form-label pull-right" style="padding-top: 15px;">Client Session Name</label>
                    <div class="col-sm-6">
                        <input type="email" class="form-control" name="sessionName" id="sessionName" placeholder="Awesome">
                    </div>
                </div>


                <div class="form-group row">

                    <label for="autoMac" class="col-sm-6 col-form-label">
                        Auto Generate Client MAC
                    </label>


                    <label for="autoMac" class="col-sm-2 col-form-label">

                        <div class="onoffswitch pull-right">
                            <input type="checkbox" name="autoMac" class="onoffswitch-checkbox" id="autoMac">
                            <label class="onoffswitch-label " for="autoMac">
                                <span class="onoffswitch-inner"></span>
                                <span class="onoffswitch-switch"></span>
                            </label>
                        </div>

                    </label>

                </div>


                <div class="form-group row ueMacDiv" style="display: none;"><label for="ueMac" class="col-sm-6 col-form-label pull-right">Client Session MAC Address</label>
                    <div class="col-sm-6"><input type="email" class="form-control" name="ueMac" id="ueMac" placeholder="AA:BB:CC:11:22:33"></div>
                </div>



                
                <div class="form-group row">

                    <label for="iperfSwitch" class="col-sm-6 col-form-label">
                        Map iPerf profile(s)
                    </label>


                    <label for="iperfSwitch" class="col-sm-2 col-form-label">

                        <div class="onoffswitch pull-right">
                            <input type="checkbox" name="iperfSwitch" class="onoffswitch-checkbox" id="iperfSwitch">
                            <label class="onoffswitch-label " for="iperfSwitch">
                                <span class="onoffswitch-inner"></span>
                                <span class="onoffswitch-switch"></span>
                            </label>
                        </div>

                    </label>

                </div>


                <div class="form-group row iperfDiv text-center" style="display: none;">
                    <div class="col-sm-6"></div>
                    <div class="col-sm-6">
                        <select name="iperfProfile" multiple="" data-select2-id="select2-data-1-7s0q" tabindex="-1" class="select2-hidden-accessible" aria-hidden="true"><option value="ipv6-udp-upload">ipv6-udp-upload</option><option value="ipv6-udp-download">ipv6-udp-download</option><option value="udp-upload">udp-upload</option><option value="tcp-upload">tcp-upload</option><option value="random2">random2</option><option value="random">random</option><option value="tcp-download">tcp-download</option><option value="udp-download">udp-download</option><option value="Surya">Surya</option><option value="BeverlyHillsUDP">BeverlyHillsUDP</option></select><span class="select2 select2-container select2-container--default" dir="ltr" data-select2-id="select2-data-2-9etd" style="width: 1.98864px;"><span class="selection"><span class="select2-selection select2-selection--multiple" role="combobox" aria-haspopup="true" aria-expanded="false" tabindex="-1" aria-disabled="false"><ul class="select2-selection__rendered" id="select2-iperfProfile-e0-container"></ul><span class="select2-search select2-search--inline"><input class="select2-search__field" type="search" tabindex="0" autocorrect="off" autocapitalize="none" spellcheck="false" role="searchbox" aria-autocomplete="list" autocomplete="off" aria-describedby="select2-iperfProfile-e0-container" placeholder="Select iPerf profile(s) ..." style="width: 100%;"></span></span></span><span class="dropdown-wrapper" aria-hidden="true"></span></span>
                    </div>
                </div>


                <div class="form-group row iperfDiv" style="display: none;">
                    <label for="sessionName" class="col-sm-6 col-form-label pull-right" style="padding-top: 15px;">iPerf Frequency</label>
                    <div class="col-sm-6">
                        <input type="number" class="form-control" name="frequency" id="frequency" placeholder="3000">
                    </div>
                </div>


                
                <div class="form-group row selectAlertProfile">
                    <label style="padding-top: 25px;" class="col-sm-6 col-form-label pull-right">
                        Map Alert Profile
                    </label>
                    <div class="col-sm-6">
                        <select name="alertProfile" class="float-right form-control">
                            <option class="defaultAlertProfile" value="default">Select Profile</option>
                        </select>
                    </div>
                </div>

            <p></p>

        </div>

        <div class="modal-footer">

            <button id="notLaunch" type="button" class="btn btn-link " data-dismiss="modal">No</button>
            <button id="launch" class="btn btn-primary" data-dismiss="modal">Create</button>

        </div>
    </div>
</div>

它产生这个 UI

我正在尝试将所有标签右对齐，我已经尝试应用 class pull-right & float-right 甚至尝试在其上应用 !important; .

似乎没有任何动静。

对我有什么提示吗？

Answer 1

设置 class text-right 而不是 pull-right 或向右浮动。因为那些 class 只会尝试从外部推动 label 标签。而不是像 «text-right » 那样的内容！

Answer 2

如果您可以更改标记，那么这里有一个带有示例的简单解决方案。用div包裹label class .col-* & .text-right 就这样

form {
  width: 600px;
  margin: 30px auto
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>

<form>
    <div class="col-xs-6 text-right">
        <label for="exampleInputEmail1">Email address</label>
    </div>
    <div class="col-xs-6">
        <div class="form-group">
            <input type="email" class="form-control" id="exampleInputEmail1" placeholder="Email">
        </div>
    </div>
    <div class="col-xs-6 text-right">
        <label for="exampleInputPassword1">Password</label>
    </div>
    <div class="col-xs-6">
        <div class="form-group">
            <input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password">
        </div>
    </div>
    <div class="col-xs-6 text-right">
        <label for="exampleInputCheckbox1">Checkbox</label>
    </div>
    <div class="col-xs-6">
        <div class="form-group">
            <div class="checkbox">
                <label>
                  <input type="checkbox" id="exampleInputCheckbox1"> Check me out
                </label>
            </div>
        </div>
    </div>
  <div class="col-xs-6 text-center col-xs-offset-6">
    <button type="submit" class="btn btn-block">Submit</button>
  </div>
</form>

如何强制表单标签正确对齐？

How to force form labels to align right?

html

css

forms

label

text-alignment

对我有什么提示吗？