将图像动态渲染到DOM中。 Glitchy effect

我试图每次点击一个按钮时动态呈现一组问题和图像（彼此相邻）。将图像动态渲染到DOM中。 Glitchy effect

我正在使用bootstrap，这里是我的代码。

<div v-if="!submittedAnswer" class="row text-center" id="questions-container"> 
     <div class="image-holder col-sm-5"> 
      <img :src="questions[questionIndex].imgUrl" class="img-responsive" /> 
     </div> 
      <div v-for="(item,index) in questions[questionIndex].choices" class="col-sm-7 text-center choice"> 
       <p class="shadow-effect 
       " :class="{'active': activeChoiceId == index}" :id="index" @click="chooseAnswer">{{item}}</p> 
      </div> 
    </div>

可以看出，图像和问题集都在各自的列中呈现。我面临的问题是，他们加载一个奇怪的顺序，从而产生一个看起来很糟糕的影响。我设法截图会发生什么。

即使他们在两个单独的列被分割。第二列似乎部分呈现在第一列的区域中。然后，当图像呈现时，它将它们推开，从而创造出看起来很怪异的效果。

我试着用边距，填充在它们之间创建更大的空间。或者使用flexbox，但问题仍然存在。

来源

2017-09-21 jonathanpuc

如果您使用Bootstrap 3，并且您的问题与布局有关，它应该包含[tag：twitter-bootstrap]标记。 – connexo

当您的视图渲染，它呈现这样的：

<div class="image-holder col-sm-5">{{ image }}</div> 
<div class="col-sm-7 text-center choice"">{{ answer }}</div> 
<div class="col-sm-7 text-center choice"">{{ answer }}</div> 
<div class="col-sm-7 text-center choice"">{{ answer }}</div> 
. 
. 
.

由于引导电网有12位，在“COL-SM-7”分区块的第一个在新行被渲染后，因为他们没有更多的空间来渲染。

你需要做的是把所有的答案都包装在<div class="col-sm-7">块中，这样他们就能正确渲染。像这样：

<div v-if="!submittedAnswer" class="row text-center" id="questions-container"> 
    <div class="image-holder col-sm-5"> 
     <img :src="questions[questionIndex].imgUrl" class="img-responsive" /> 
    </div> 
    <div class="col-sm-7"> 
     <div v-for="(item,index) in questions[questionIndex].choices" class="text-center choice"> 
      <p class="shadow-effect 
      " :class="{'active': activeChoiceId == index}" :id="index" @click="chooseAnswer">{{item}}</p> 
     </div> 
    </div> 
</div>

来源

2017-09-22 18:19:41

将图像动态渲染到DOM中。 Glitchy effect

回答

相关问题