css - 在文本区域 Bootstrap 4 旁边显示图像

Question

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

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

无论是在 PC 上还是在响应模式下，都始终看起来像以前的图像。

这是我实际的 Angular 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>

我尝试了几种方法来更改 css 来获得它，但我做不到。

非常感谢！

标签： csstwitter-bootstrapbootstrap-4

Answer 1

<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>

只需完全删除 col-lg-12 div。

https://codepen.io/anon/pen/jpYQQK