2016-10-07 111 views
0

我想在窗口模式中显示产品的信息和图像,但我不知道要使用它的图像大的是网格的各行。Bootstrap-table:网格系统 - 如何将图像与宽度放在不同的行和同一列中

我的代码是:

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

enter image description here

我想,所有的列都在同一距离:

enter image description here

我试图使用偏移参数和子参数但它不工作:(

回答

0

你可以重写你的代码结构。在2节第一部分数据和第二图像

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

划分网格...

+0

仅供参考 - 你删除OP的占位符值的字段。 –

+0

oops ..只需将左块分割为2块col-md-6,即col-md-6用于标签,而col-md-6用于数据段 –

+0

@Anil Kumar Ram,非常感谢:)这很容易! – ruzD

相关问题