使用引导程序的 CSS 对齐问题答案

【问题标题】：CSS alignment issue using bootstrap使用引导程序的 CSS 对齐问题
【发布时间】：2018-09-28 11:11:22
【问题描述】：

我在使用 bootstrap CSS 时遇到对齐问题。

我想要这样：

地名：下拉框

性别

（单选按钮）男性（单选按钮）女性

金额

最大值：文本框最小值：文本框

我该怎么做？

【问题讨论】：

在下面查看我的解决方案

标签： css bootstrap-4

【解决方案1】：

这是我的解决方案：

<div _ngcontent-c0="" class="form-group" style="">
    <label _ngcontent-c0="" class="col-xs-3 control-label">Gender</label>
    <div _ngcontent-c0="" class="col-xs-6" style="display: flex;">
        <div _ngcontent-c0="" class="radio"><label _ngcontent-c0="">
            <input _ngcontent-c0="" name="gender" value="male" type="radio"> Male </label>
        </div>
        <div _ngcontent-c0="" class="radio">
            <label _ngcontent-c0=""><input _ngcontent-c0="" name="gender" value="female" type="radio"> Female </label>
        </div>
    </div>
</div>

我已将display: flex; 添加到：

<div _ngcontent-c0="" class="col-xs-6" style="display: flex;">

这行得通。但是，最好给这个类（col-xs-6 除外）并在 CSS 文件中执行 display: flex;。

然后，您需要将margin-left 或margin-right 添加到其中一个按钮以留出空间。

希望对您有所帮助。

【讨论】：

【解决方案2】：

这是你更新的代码：

<app-header></app-header>

<div class="container">

	<form [formGroup]="form" class="">

		<div class="row padding-top-xl">
			<div class="col-sm-8">

				<form id="basicBootstrapForm" class="form-horizontal">

					<div class="form-group">
						<label class="col-3 control-label">Place Name</label>
        <div class="col-5">
            <select class="form-control">
            <option>USA</option>
              <option>UK</option>
            </select>
        </div>
    </div>
     
    <div class="form-group">
        <label class="col-3 control-label">Gender</label>
        <div class="col-6">
          <div class="row">
            <div class="radio col-6">
                <label>
                    <input type="radio" name="gender" value="male" /> Male
                </label>
            </div>
            <div class="radio col-6">
                <label>
                    <input type="radio" name="gender" value="female" /> Female
                </label>
            </div>
            
          </div>
           
        </div>
    </div>
    
       <div class="form-group">
        <p>Amount</p> 
        <div class="row">
          <label class="col-2 control-label">Max</label>
          <div class="col-4">
              <input type="text" class="form-control" name="firstName"/>
          </div>
          <label class="col-2 control-label">Min</label>
          <div class="col-4">
              <input type="text" class="form-control" name="lastName"/>
          </div>
          
        </div>
    </div>
 
</form>
 
  </div> 

  <div class="col-sm-4">
    <button type="button" class="btn btn-success">Success</button>
  </div>

 </div>

 
</form>
 
</div> 
  <appfooter></appfooter>

因为您使用的是 Bootstrap 4，所以您可以忘记 col-xs-6、the default is col-6：

xs 网格类已修改为不需要中缀来更准确地表示它们开始应用样式在 min-width: 0 而不是设置的像素值。现在是 .col-6，而不是 .col-xs-6。所有其他网格层都需要中缀（例如，sm）。

【讨论】：

地名不正确