Question

我有一个非常简单的bootstrap位于vue.js文件中。该
<div v-for="location in 5"> 只需在＆＃34;位置旁打印5个字体真棒图标：＆＃34; 这适用于我的大多数响应案例，但是当我在屏幕上拖动我的屏幕时，令人敬畏的图标与位置文本重叠（当我在md和sm之间预测时）。如果我将它包装在一个容器中，这仍然会发生。

有谁知道为什么？

由于

 <div id="location-section" class="section">
      <div class="row">
        <div class="col-md-3">
          <div >Locations:</div>
        </div>
        <div v-for="location in 5">
          <div class="col-md-3 ">
            <i class="fa fa-flag" aria-hidden="true"></i>
          </div>
        </div>
      </div>
    </div>

Answer 1

那是因为您只使用col-md-3。它只对大于991px的屏幕尺寸做出响应，因此您遇到了问题。使用col-xs-3可以使其响应所有屏幕尺寸。

试试这个 -

 <div id="location-section" class="section">
  <div class="row">
    <div class="col-xs-3">
      <div >Locations:</div>
    </div>
    <div v-for="location in 5">
      <div class="col-xs-3 ">
        <i class="fa fa-flag" aria-hidden="true"></i>
      </div>
    </div>
  </div>
</div>

引导元素重叠

1 个答案: