Question

我第一次使用Bootstrap v.4，我有一个页脚，在桌面上有三行，在左边列中有一个图标，右边是文本。

但是在手机上我希望图标显示在文本的顶部。我知道我可以使用div类添加row来实现此目的，但这也会影响桌面。

我尝试过研究解决方案，但是不存在正确/官方解决方案，或者我没有使用正确的搜索条件。

有人可以帮忙吗？谢谢！

    <div class="col" id="kpc-phone-address-booking">

      <h2>Contact</h2>

      <div class="row">

        <div class="col-sm-3">
          <i class="fa fa-phone" aria-hidden="true"></i>
        </div>

        <div class="col-sm-9">
          <p><a href="tel:<?php echo get_field('kpc_site_wide_fields_phone_1', 'option'); ?>"><?php echo the_field('kpc_site_wide_fields_phone_1', 'option'); ?></a></p>
          <p><a href="tel:<?php echo get_field('kpc_site_wide_fields_phone_2', 'option'); ?>"><?php echo the_field('kpc_site_wide_fields_phone_2', 'option'); ?></a></p>
        </div>

      </div>



      <div class="row">

        <div class="col-sm-3">
          <i class="fa fa-map-marker" aria-hidden="true"></i>
        </div>

        <div class="col-sm-9">
          <p itemprop="address" itemscope itemtype="http://schema.org/PostalAddress"><?php echo the_field('kpc_site_wide_fields_address', 'option'); ?></p>
        </div>

      </div>



      <div class="row">

        <div class="col-sm-3">
          <i class="fa fa-calendar" aria-hidden="true"></i>
        </div>

        <div class="col-sm-9">
          <p><a href="<?php echo get_field('kpc_site_wide_fields_schedule_an_appointment_url', 'option'); ?>">Schedule an Appointment »</a></p>
        </div>

      </div>

    </div>

Answer 1

简短回答：默认情况下，列总是堆叠并在xs断点处变为全宽（移动宽度<576px）。

有关Bootstrap网格的两个重要事项：

您可以在一个.row中放置超过12个单位的列。这称为column wrapping。当列超过12时，它们会包裹＃34;到新的一行。

因此，如果您将标记更改为...

<div class="row">
        <div class="col" id="kpc-phone-address-booking">
            <h2>Contact</h2>
            <div class="row">
                <div class="col-sm-3">
                    <i class="fa fa-phone" aria-hidden="true"></i>
                </div>
                <div class="col-sm-9">
                    <p><a href="-">Option</a></p>
                    <p><a href="-">Option</a></p>
                </div>
                <div class="col-sm-3">
                    <i class="fa fa-map-marker" aria-hidden="true"></i>
                </div>
                <div class="col-sm-9">
                    <p itemprop="address" itemscope="" itemtype="http://schema.org/PostalAddress">Option</p>
                </div>
                <div class="col-sm-3">
                    <i class="fa fa-calendar" aria-hidden="true"></i>
                </div>
                <div class="col-sm-9">
                    <p><a href="">Schedule an Appointment »</a></p>
                </div>
            </div>
        </div>
    </div>

尽管.row已被删除，但您会在桌面上看到它的工作方式相同。这是因为3 + 9 = 12，所以3 + 9的每个组合将＆＃34;包裹＆＃34;到下一行。

http://www.codeply.com/go/1cjoPMdpmd

列始终堆叠，并在xs断点上变为全宽（＆lt; 576px）。基本上col-12，即使未指定，也暗示。使用特定的col-*（xs）类来阻止堆叠。

例如，如果您的列已更改为col-3和col-9，则不会在 576px的宽度处垂直堆叠。当您将demo的大小调整为窄屏幕宽度＆lt; 576px时，请注意列垂直堆叠并变为全宽。但是，我将最后两列更改为：

        <div class="col-sm-3 col-2">
             <i class="fa fa-calendar" aria-hidden="true"></i>
        </div>
        <div class="col-sm-9 col-10">
            <p><a href="">Schedule an Appointment »</a></p>
        </div>

这些最后2列prevent将垂直堆叠。随着屏幕宽度的缩小，它们将在宽度上缩小。 576px。

在移动设备上堆叠列而不在桌面上堆叠列的官方方法是什么？

1 个答案: