如何以引导程序形式在右侧添加图像字段

Question

我有一个带有9个输入字段的引导程序表单。我在每行中应用了3个字段，看起来很敏感。我想知道如何在右侧添加图像字段，并且应该是三行的跨度。请检查我下面的代码，并建议如何将图像控件对齐到右侧。

更新的代码版本3.0.0：-

      <div className="container-fluid">
    <div className="row">
      <div className="col-sm-10">
        <div className="container-fluid">
          <div className="form-group row">
            <label className="col-sm-1  col-form-label col-form-label-sm">First Name</label>
            <div className="col-sm-3 pl-0">
              <input type="text" name="FirstName" className="form-control form-control-sm" id="TxtFirstName"
                     placeholder="First Name" value={ this.state.FirstName } required
                     onChange={ this.onChangeHandler }/>
            </div>

            <label className="col-sm-1 col-form-label col-form-label-sm">Last Name</label>
            <div className="col-sm-3 pl-0">
              <input type="text" name="LastName" className="form-control form-control-sm" id="TxtLastName"
                     placeholder="Last Name" value={ this.state.LastName } required
                     onChange={ this.onChangeHandler }/>
            </div>

            <label className="col-sm-1 col-form-label col-form-label-sm">Email Id</label>
            <div className="col-sm-3 pl-0">
              <input type="email" name="EmailId" className="form-control form-control-sm" id="TxtEmailId"
                     placeholder="EmailId" value={ this.state.EmailId } required onChange={ this.onChangeHandler }/>
            </div>

          </div>

          <div className="form-group row">
            <label className="col-sm-1 col-form-label col-form-label-sm">Mobile No</label>
            <div className="col-sm-3 pl-0">
              <input type="text" name="MobileNo" className="form-control form-control-sm" id="TxtMobileNo"
                     placeholder="Mobile No" value={ this.state.MobileNo } onChange={ this.onChangeHandler }/>
            </div>

            <label className="col-sm-1 col-form-label col-form-label-sm">Division</label>
            <div className="col-sm-3 pl-0">
              <select name="DivisionId" className="form-control" required value={ this.state.DivisionId }
                      onChange={ this.onChangeHandler }>
                { DivisionList }
              </select>
            </div>

            <label className="col-sm-1 col-form-label col-form-label-sm">User Name</label>
            <div className="col-sm-3 pl-0">
              <input type="text" name="UserName" className="form-control form-control-sm" id="TxtUserName"
                     placeholder="User Name" value={ this.state.UserName } required
                     onChange={ this.onChangeHandler }/>
            </div>

          </div>

          <div className="form-group row">
            <label className="col-sm-1 col-form-label col-form-label-sm">Password</label>
            <div className="col-sm-3 pl-0">
              <input type="password" name="DPassword" className="form-control form-control-sm" id="TxtPassword"
                     placeholder="Password" value={ this.state.DPassword } required
                     onChange={ this.onChangeHandler }/>
            </div>

            <label className="col-sm-1 col-form-label col-form-label-sm">Confirm</label>
            <div className="col-sm-3 pl-0">
              <input type="password" name="ConfirmPassword" className="form-control form-control-sm"
                     id="TxtConfirm" placeholder="Confirm Password" required value={ this.state.ConfirmPassword }
                     onChange={ this.onChangeHandler }/>
            </div>

            <label className="col-sm-1 col-form-label col-form-label-sm">Role</label>
            <div className="col-sm-3 pl-0">
              <select name="RoleId" data-show-subtext="true" data-live-search="true"
                      className="form-control selectpicker" id="CboRole" value={ this.state.RoleId } required
                      onChange={ this.onChangeHandler }>
                { RoleList }
              </select>
            </div>


          </div>
        </div>
      </div>
      <div className="col-sm-2">
        <img className='img-fluid' src={ users } alt='Alt text'/>
      </div>
    </div>
  </div>  

屏幕截图：-

Answer 1

这取决于您要拍摄图像的列数，但是您可以执行以下操作：将代码包装在新的行中。然后将其划分为任意多的列（例如，我以50:50的比例划分了该列-屏幕的50％将填充您的输入，图像的50％将填充）-您可以自行配置。尝试以下方法，让我知道这是否是您想要的：

  <div className="container-fluid">
    <div className="row">
      <div className="col-sm-6">
        <div className="container-fluid">
          <div className="form-group row">
            <label className="col-sm-1 col-form-label col-form-label-sm">First Name</label>
            <div className="col-sm-3">
              <input type="text" name="FirstName" className="form-control form-control-sm" id="TxtFirstName"
                     placeholder="First Name" value={ this.state.FirstName } required
                     onChange={ this.onChangeHandler }/>
            </div>

            <label className="col-sm-1 col-form-label col-form-label-sm">Last Name</label>
            <div className="col-sm-3">
              <input type="text" name="LastName" className="form-control form-control-sm" id="TxtLastName"
                     placeholder="Last Name" value={ this.state.LastName } required
                     onChange={ this.onChangeHandler }/>
            </div>

            <label className="col-sm-1 col-form-label col-form-label-sm">Email Id</label>
            <div className="col-sm-3">
              <input type="email" name="EmailId" className="form-control form-control-sm" id="TxtEmailId"
                     placeholder="EmailId" value={ this.state.EmailId } required onChange={ this.onChangeHandler }/>
            </div>

          </div>

          <div className="form-group row">
            <label className="col-sm-1 col-form-label col-form-label-sm">Mobile No</label>
            <div className="col-sm-3">
              <input type="text" name="MobileNo" className="form-control form-control-sm" id="TxtMobileNo"
                     placeholder="Mobile No" value={ this.state.MobileNo } onChange={ this.onChangeHandler }/>
            </div>

            <label className="col-sm-1 col-form-label col-form-label-sm">Division</label>
            <div className="col-sm-3">
              <select name="DivisionId" className="form-control" required value={ this.state.DivisionId }
                      onChange={ this.onChangeHandler }>
                { DivisionList }
              </select>
            </div>

            <label className="col-sm-1 col-form-label col-form-label-sm">User Name</label>
            <div className="col-sm-3">
              <input type="text" name="UserName" className="form-control form-control-sm" id="TxtUserName"
                     placeholder="User Name" value={ this.state.UserName } required
                     onChange={ this.onChangeHandler }/>
            </div>

          </div>

          <div className="form-group row">
            <label className="col-sm-1 col-form-label col-form-label-sm">Password</label>
            <div className="col-sm-3">
              <input type="password" name="DPassword" className="form-control form-control-sm" id="TxtPassword"
                     placeholder="Password" value={ this.state.DPassword } required
                     onChange={ this.onChangeHandler }/>
            </div>

            <label className="col-sm-1 col-form-label col-form-label-sm">Confirm</label>
            <div className="col-sm-3">
              <input type="password" name="ConfirmPassword" className="form-control form-control-sm"
                     id="TxtConfirm" placeholder="Confirm Password" required value={ this.state.ConfirmPassword }
                     onChange={ this.onChangeHandler }/>
            </div>

            <label className="col-sm-1 col-form-label col-form-label-sm">Role</label>
            <div className="col-sm-3">
              <select name="RoleId" data-show-subtext="true" data-live-search="true"
                      className="form-control selectpicker" id="CboRole" value={ this.state.RoleId } required
                      onChange={ this.onChangeHandler }>
                { RoleList }
              </select>
            </div>


          </div>
        </div>
      </div>
      <div className="col-sm-6">
        <img className='img-fluid' src={ path } alt='Alt text'/>
      </div>
    </div>
  </div>