我有一个带有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>
屏幕截图:-
答案 0 :(得分:0)
这取决于您要拍摄图像的列数,但是您可以执行以下操作:将代码包装在新的行中。然后将其划分为任意多的列(例如,我以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>