Css 在textarea引导4旁边显示图像

Css 在textarea引导4旁边显示图像,css,twitter-bootstrap,bootstrap-4,Css,Twitter Bootstrap,Bootstrap 4,我需要使用Bootstrap4在文本区域旁边显示一个图像。但我有一个显示问题: 我想要的是它看起来像的图像和文本区域: 无论是在pc上还是在响应模式下,图像都始终与前一幅图像相同 这是我的实际HTML组件的代码: <div class="container"> <div class="row"> <div class="col-lg-12"> <div class="col-lg-4">

我需要使用Bootstrap4在文本区域旁边显示一个图像。但我有一个显示问题:

我想要的是它看起来像的图像和文本区域:

无论是在pc上还是在响应模式下,图像都始终与前一幅图像相同

这是我的实际HTML组件的代码:

<div class="container">
<div class="row">
          <div class="col-lg-12">
            <div class="col-lg-4">
                <img 
                data-src="holder.js/200x200" 
                class="rounded float-left" 
                alt="100x100" 
                src="data:image/svg+xml;charset=UTF-8,%3Csvg%20width%3D%22200%22%20height%3D%22200%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20200%20200%22%20preserveAspectRatio%3D%22none%22%3E%3Cdefs%3E%3Cstyle%20type%3D%22text%2Fcss%22%3E%23holder_164e3f66702%20text%20%7B%20fill%3Argba(255%2C255%2C255%2C.75)%3Bfont-weight%3Anormal%3Bfont-family%3AHelvetica%2C%20monospace%3Bfont-size%3A10pt%20%7D%20%3C%2Fstyle%3E%3C%2Fdefs%3E%3Cg%20id%3D%22holder_164e3f66702%22%3E%3Crect%20width%3D%22200%22%20height%3D%22200%22%20fill%3D%22%23777%22%3E%3C%2Frect%3E%3Cg%3E%3Ctext%20x%3D%2274.4296875%22%20y%3D%22104.5%22%3E200x200%3C%2Ftext%3E%3C%2Fg%3E%3C%2Fg%3E%3C%2Fsvg%3E" 
                data-holder-rendered="true" 
                style="width: 150px; height: 150px; margin:5px;">
            </div>
            <div class="col-lg-8">
                <label for="modifications">Modificaciones al diseño</label>
                <textarea 
                  class="form-control" 
                  id="modifications" 
                  rows="4"
                  required 
                  [(ngModel)]="mModifications" 
                  name="modifications"
                  #modifications="ngModel"
                  [ngClass]="{'is-valid': modifications.valid && modifications.touched, 'is-invalid': modifications.invalid && modifications.touched}">
                </textarea>
                <small *ngIf="modifications.untouched || modifications.valid && modifications.touched" class="form-text text-muted">Se conciso en la descripción, esto ayuda a nuestros expertos a estar preparados el día de la visita.</small>
                <small *ngIf="modifications.invalid && modifications.touched" class="form-text text-muted-error">Debes describir el trabajo a realizar</small>
            </div>
          </div>
        </div>  
       </div>

艾尔迪塞诺改良酒店
在描述的过程中,我们需要一位新的专家为参观做准备。
Debes describir el trabajo a Realizer
我尝试了几种方法来更改css以获得此效果,但我做不到

多谢各位


<div class="container">
<div class="row">
            <div class="col-lg-4">
                <img 
                data-src="holder.js/200x200" 
                class="rounded float-left" 
                alt="100x100" 
                src="data:image/svg+xml;charset=UTF-8,%3Csvg%20width%3D%22200%22%20height%3D%22200%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20200%20200%22%20preserveAspectRatio%3D%22none%22%3E%3Cdefs%3E%3Cstyle%20type%3D%22text%2Fcss%22%3E%23holder_164e3f66702%20text%20%7B%20fill%3Argba(255%2C255%2C255%2C.75)%3Bfont-weight%3Anormal%3Bfont-family%3AHelvetica%2C%20monospace%3Bfont-size%3A10pt%20%7D%20%3C%2Fstyle%3E%3C%2Fdefs%3E%3Cg%20id%3D%22holder_164e3f66702%22%3E%3Crect%20width%3D%22200%22%20height%3D%22200%22%20fill%3D%22%23777%22%3E%3C%2Frect%3E%3Cg%3E%3Ctext%20x%3D%2274.4296875%22%20y%3D%22104.5%22%3E200x200%3C%2Ftext%3E%3C%2Fg%3E%3C%2Fg%3E%3C%2Fsvg%3E" 
                data-holder-rendered="true">
            </div>
            <div class="col-lg-8">
                <label for="modifications">Modificaciones al diseño</label>
                <textarea 
                  class="form-control" 
                  id="modifications" 
                  rows="4"
                  required 
                  [(ngModel)]="mModifications" 
                  name="modifications"
                  #modifications="ngModel"
                  [ngClass]="{'is-valid': modifications.valid && modifications.touched, 'is-invalid': modifications.invalid && modifications.touched}">
                </textarea>
                <small *ngIf="modifications.untouched || modifications.valid && modifications.touched" class="form-text text-muted">Se conciso en la descripción, esto ayuda a nuestros expertos a estar preparados el día de la visita.</small>
                <small *ngIf="modifications.invalid && modifications.touched" class="form-text text-muted-error">Debes describir el trabajo a realizar</small>

          </div>
        </div>  
       </div>
艾尔迪塞诺改良酒店 在描述的过程中,我们需要一位新的专家为参观做准备。 Debes describir el trabajo a Realizer
只需将col-lg-12 div全部拆下


艾尔迪塞诺改良酒店
在描述的过程中,我们需要一位新的专家为参观做准备。
Debes describir el trabajo a Realizer
只需将col-lg-12 div全部拆下

在html中

在html中


删除
col-lg-12
div-您拥有的不是引导网格的有效标记。就是这样。非常感谢!删除
col-lg-12
div-您拥有的不是引导网格的有效标记。就是这样。非常感谢!
  <div class="col-md-12" id="dvImageTextBox">   
      <input id="cc-cvc" placeholder="CVC" formControlName="cvc" type="text" autocomplete="off" ccCvc>                                           
      <img src="assets/citybook/images/CVV.png" height="45px" width="75px" />                                                                                                                     
  </div> 
#dvImageTextBox
{
position: relative;   
 }
#dvImageTextBox input
{
display: block;
width: 100%;

 }

#dvImageTextBox img
{
position: absolute;
top: 5px;
right: 5px;
}