Question

我有一个旋转木马，在引导程序中有两行。在标准视图中布局很好，但是当它进入移动查询时，页面布局变得混乱。第二行似乎与蓝色列重叠，我不确定原因。

<div id="myCarousel" class="carousel slide carousel-fade" data-ride="carousel" >
    <div class="carousel-inner">
        <div class="item active">
            <div >

            </div>
        </div>
    </div>
</div>

 <div class="container-fluid box">
  <div   class="row" id="triple">
    <div class="col-lg-4 one">
      <p>123</p>
    </div>
    <div class="col-lg-4 two">
      <p>456</p>
    </div>
    <div class="col-lg-4 three">
      <p>789</p>
    </div>
  </div>

  <div class="row" id="single">
    <div class="col-lg-4 four">
    </div>
    <div class="col-lg-4 four">
    </div>
    <div class="col-lg-4 four">
    </div>
</div>

Answer 1

如果您想要移动设备响应，则应首先定位移动设备

{{1}}

根据您的更新，请检查此fiddle

Answer 2

以下是您的修复：

HTML：

        <Controls:MetroAnimatedSingleRowTabControl Controls:TabControlHelper.IsUnderlined="True" Margin="5" ScrollViewer.PanningMode="Both" ScrollViewer.CanContentScroll="False" ScrollViewer.HorizontalScrollBarVisibility="Hidden">
            <Controls:MetroTabItem Header="Thread Image Download">

            </Controls:MetroTabItem>
            <Controls:MetroTabItem Header="Random Board Stats">

            </Controls:MetroTabItem>
        </Controls:MetroAnimatedSingleRowTabControl>

CSS：

<div id="myCarousel" class="carousel slide carousel-fade" data-ride="carousel" >
        <div class="carousel-inner">
            <div class="item active">
                <div >

                </div>
            </div>
        </div>
</div>
<div class="container-fluid box">
  <div   class="row" id="triple">
    <div class="col-lg-4 one">
      <p>123</p>
    </div>
    <div class="col-lg-4 two">
      <p>456</p>
    </div>
    <div class="col-lg-4 three">
       <p>789</p>
    </div>
</div>
<div class="row" id="single">
  <div class="col-lg-4 four">
</div>
<div class="col-lg-4 four">
    </div>
<div class="col-lg-4 four">
    </div>
</div>

小提琴：https://jsfiddle.net/vsk59tck/1/

在引导程序移动版本中重叠问题

2 个答案: