Question

我正在使用引导CSS 遇到对齐问题。

我想要这样：

地名：下拉框

性别

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

金额

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

我该怎么做？

Answer 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，以为其留出空间。

希望有帮助。

Answer 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-xs-6，而不是.col-6。所有其他网格层都需要该前缀（例如sm）。

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

2 个答案: