Проблема выравнивания CSS при использовании начальной загрузки

Question

У меня проблемы с выравниванием при использовании начальной загрузки CSS .

Я хочу это так:

Название места: выпадающий список

Пол

(переключатель) Мужской (переключатель) Женский

Сумма

Макс .: текстовое поле Мин .: текстовое поле

Как мне это сделать?

Answer 1

Вот вам обновленный код:

<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, по умолчанию col-6:

xs классы сетки были изменены, чтобы не требовать, чтобы инфикс точнее представлял, что они начинают применять стили с min-width: 0, а не с заданным значением пикселя.Вместо .col-xs-6 теперь .col-6.Все остальные уровни сетки требуют инфикса (например, sm).

Answer 2

Вот мое решение:

<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) и выполнить display: flex; в вашем CSS-файле.

Затем вам нужно будет добавить либо margin-left, либо * 1012.* одной из кнопок, чтобы освободить место.

Надеюсь, это поможет.