javascript - 将图像动态渲染到 DOM 中。毛刺效应

Question

每次单击按钮时，我都会尝试动态呈现一组问题和一张图像(彼此相邻放置)。

我正在使用 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 但问题仍然存在。

Answer 1

当您的 View 呈现时，它呈现如下:

<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 block 在新行中呈现，因为它们没有更多空间可呈现。

您需要做的是将所有答案包装在一个 <div class="col-sm-7"> 中 block ，因此它们会正确呈现。像这样:

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