html - Bootstrap 表 : Grid system - How to put image with width in different rows and the same column

Question

我想在窗口模态中显示产品的信息和图像，但我不知道在网格的各行中放置一张大图像。

我的代码是:

<div class="row">
                    <div class="row">
                        <div class="col-md-6 descFields impFields">
                            CODI
                        </div>
                        <div class="col-md-6 .offset-md5">   
                            <img class='img-modal' src='prod/images/nofoto.jpg'>
                        </div>
                    </div>

                    <div class="row">
                        <div class="col-md-6 descFields impFields">
                            EDICIÓ
                        </div>
                        <div class="col-md-6">

                        </div>
                    </div>

                    <div class="row">
                        <div class="col-md-6 descFields impFields">
                            PÀGINA
                        </div>
                        <div class="col-md-6">

                        </div> 
                    </div>

                    <div class="row">
                        <div class="col-md-6 descFields impFields">
                            MODIF.
                        </div>
                        <div class="col-md-6">

                        </div>
                    </div>

                    <div class="row">
                        <div class="col-md-6 descFields impFields">
                            USER
                        </div>
                        <div class="col-md-6">

                        </div>
                    </div>
</div>

我希望所有列的距离相同:

我正在尝试使用偏移参数和子参数，但它不起作用:(

Answer 1

你可以重写你的代码结构..

          <div class="row">
               <div class="col-md-6">
                  <div class="row">
                     <div class="col-md-12 descFields impFields">
                        CODI
                     </div>
                     <div class="col-md-12 descFields impFields">
                        EDICIÓ
                     </div>
                     <div class="col-md-12 descFields impFields">
                        PÀGINA
                     </div>
                     <div class="col-md-12 descFields impFields">
                        MODIF.
                     </div>
                     <div class="col-md-12 descFields impFields">
                        USER
                     </div>
                  </div>
               </div>
               <div class="col-md-6">   
                  <img class='img-modal' src='prod/images/nofoto.jpg'>
               </div>
            </div>

将网格分成两部分，第一部分用于数据，第二部分用于图像...