將圖像動態渲染到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

回答

相關問題