Question

如何根据下面的“房间”或“人物”标签将表单标签与Bootstrap 4.0中表单控件的右侧对齐：

使用下面的代码，它就在下面：

<div class="form-group">
    <label for="roomsno">meeting rooms required</label>
    <input type="textbox" id="roomsno" class="form-control col-md-4" type="number" />           
    <span>rooms</span>      
</div>

这是我当前的代码作为JsFiddle：

http://jsfiddle.net/nmg196/b4nqd5a6/4/

Answer 1

所以..有很多方法可以做到这一点。我认为最适合的是

将display: flex添加到表单组类的css

对于你的jsfiddle示例

<div class="form-group">
      <label>number of delegates</label>
      <div class="form-group1">
        <input type="textbox" ID="e1" class="form-control col-md-2" type="number" />
        <span> people</span>

      </div>
    </div>

CSS：

    .form-group1 {
      display: flex
 }

Answer 2

将ml-auto添加到标签类属性

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_height="match_parent"
    android:layout_width="match_parent"
    android:orientation="vertical"
    xmlns:card_view="http://schemas.android.com/apk/res-auto"
    xmlns:android="http://schemas.android.com/apk/res/android">

    <fragment android:id="@+id/place_autocomplete_fragment"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:name="com.google.android.gms.location.places.ui.PlaceAutocompleteFragment"
        xmlns:android="http://schemas.android.com/apk/res/android" />


    <fragment xmlns:android="http://schemas.android.com/apk/res/android"
        xmlns:tools="http://schemas.android.com/tools"
        android:id="@+id/map"
        android:name="com.google.android.gms.maps.SupportMapFragment"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        tools:context="com.example.mapwithmarker.MapsMarkerActivity" />

</LinearLayout>

Answer 3

您需要将text-align：leftstyle添加到.control-label。

因为bootstrap使用选择器.form-horizontal .control-label在水平表单中给出了文本对齐样式，所以你需要使用相同或更具体的选择器：

.form-horizontal .control-label {text-align：left！important; }

OR

只需在标签中添加内联样式=“text-align：left”。

如果您需要覆盖某些默认样式，请使用“！important”。

谢谢！

如何在Bootstrap 4中将表单标签对齐到控件的右侧？

3 个答案: