问题描述
如何将下部移到上部的右侧? 我使用Bootstrap ... 我是Bootstrap的新手。 我想要这个视图=> http://prntscr.com/ua4e4p
<div class="form-row">
<div class="form-group col-md-8">
<img src="img/frame.svg" class="img-fluid" alt="Responsive image">
</div>
<div class="form-group col-md-4">
<label for="inputState">Product</label>
<select required name="proje_aciliyet" class="form-control">
<option>SWA-71</option>
<option>QAZ-89</option>
<option>Acelesi Yok</option>
</select>
</div>
<div class="form-group col-md-4 float-right">
<label for="inputState">Urgent</label>
<select required name="proje_aciliyet" class="form-control">
<option>No</option>
<option>Yes</option>
</select>
</div>
</div>
解决方法
在下面的两个输入中保持相同,您必须将其包装成一列。
尝试一下:
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous">
<div class="form-row">
<div class="form-group col-md-8">
<img src="https://dummyimage.com/725x250/e031e0/fff" class="img-fluid" alt="Responsive image">
</div>
<div class="form-group col-md-4 float-right">
<label for="inputState">Product</label>
<select required name="proje_aciliyet" class="form-control">
<option>SWA-71</option>
<option>QAZ-89</option>
<option>Acelesi Yok</option>
</select>
<label for="inputState">Urgent</label>
<select required name="proje_aciliyet" class="form-control">
<option>No</option>
<option>Yes</option>
</select>
</div>
</div>