如何将下部移到上部的右侧?

问题描述

如何将下部移到上部的右侧? 我使用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>

enter image description here