Question

我不是要在电话屏幕上堆叠在一起的列，而是必须左右滚动才能看到它们。从它看起来，我已经正确地嵌套在行和容器中的所有必需组件。我在Bootstrap 3.1.1上。

代码：

<header class="jumbotron" role="banner">
  <div class="container">
    <div class="row">

      <div class="col-md-6">
        <!-- Title -->
        <h1>MyApp</h1>
        <!-- Sub title -->
        <p>About my app: </p>
        <ol>
          <li>Info 1</li>
          <li>Info 2</li>
          <li>Info 3</li>
        </ol>
        <p>Hope you like it!</p>

        <div class="row">
          <!-- Button -->
          <div class="col-md-6">
            <a href="http://play.google.com/store?utm_source=global_co&utm_medium=prtnr&utm_content=Mar2515&utm_campaign=PartBadge&pcampaignid=MKT-AC-global-none-all-co-pr-py-PartBadges-Oct1515-1"><img width="135" alt="Get it on Google Play" src="https://play.google.com/intl/en_us/badges/images/apps/en-play-badge.png" /></a>
          </div>
          <div class="col-md-5">
            <a href="https://geo.itunes.apple.com/us/app/spotify-music/id324684580?mt=8" style="display:inline-block;overflow:hidden;background:url(http://linkmaker.itunes.apple.com/images/badges/en-us/badge_appstore-lrg.svg) no-repeat;width:165px;height:40px;"></a>
          </div>
        </div>
        <!-- /.row -->

      </div>
      <!-- /.col-md-6 -->

      <div class="col-md-4">
        <!-- Images showcase -->
        <figure>
          <img class="img-iPhone" src="images/1t.png" alt="">
        </figure>
      </div>
      <!-- /.col-md-4 -->

    </div>
    <!-- /.row -->
  </div>
  <!-- /.container -->
</header>
<!-- /.jumbotron -->

<!-- Services -->
<section class="info-sec" id="section-1">
  <div class="container">
    <div class="row">

      <div class="col-md-4">
        <figure>
          <img class="img-iPhone" src="images/1t.png" alt="">
        </figure>
        <p>
          Details here
        </p>
      </div>
      <!-- /.col-md-4 -->

      <div class="col-md-4">
        <!-- Images showcase -->
        <figure>
          <img class="img-iPhone" src="images/1t.png" alt="">
        </figure>
        <p>
          Details here
        </p>
      </div>
      <!-- /.col-md-4 -->

      <div class="col-md-4">
        <figure>
          <img class="img-iPhone" src="images/1t.png" alt="">
        </figure>
        <p>
          Details here
        </p>
      </div>
      <!-- /.col-md-4 -->

    </div>
    <!-- /.row -->
  </div>
  <!-- /.container -->
</section>
<!-- /.info-sec-->

截图：

桌面：

电话：

感谢任何帮助。谢谢！

Answer 1

您必须了解Bootstrap策略

您必须告诉您的HTML页面＆＃34;对于您想要3个列的桌面，对于您想要2或3的标签，对于您想要1个col＆＃34;通过bootstarp预定义类

小于768px的超小型手机：.col-xs- $ 小型设备平板电脑768px及以上：.col-sm- $ 中型设备台式机992px及以上版本：.col-md- $ 大型设备大型台式机1200px及以上：.col-lg- $

正式的Bootstrap文档提供了对网格如何工作的更全面的理解。请查看这些内容，以便根据浏览器大小更准确地了解列大小，装订线大小，最大列大小以及整个网站的最大宽度。 http://getbootstrap.com/css/#grid

像col-xs-1 ...... col-xs-12，col-md-1 ...... col-md-12，col-lg-1 ...... ..col-LG-12

表示如果您想要基于4列的布局，则将其分为12列，然后使用数字3

<强>＆＃34;的Col-XS-3＆＃34; col代表专栏 xs代表超小屏幕意味着移动 -3代表4列＆＃34;（12/4）= 3＆＃34;

＆＃13;

{{1}}

＆＃13;

Answer 2

在手机图像div中，您可以尝试为小屏幕尺寸添加特殊类别。

<div class="col-md-4 col-sm-12">

为每个人执行此操作将使他们使用屏幕上的整个屏幕宽度，并最终将它们堆叠在彼此之下。

Bootstrap列没有堆叠在小/移动屏幕上

2 个答案: