css - 在调整屏幕大小的 Bootstrap 中自定义放置元素

Question

目前，我在bootstrap中的布局如下。这在窗口最大化时适用。

col-md-3 | col-md-3 | col-md-3 | col-md-3 |
col-md-3 | col-md-3 |      col-md-6       |

但是，当我尝试将其调整为屏幕的一半，接近标签或智能手机的尺寸时，它会变成:

col-md-3 
col-md-3 
col-md-3 
col-md-3 
col-md-3 
col-md-3 
col-md-6

现在，当屏幕最小化到选项卡的尺寸时，我想要实现的是:

col-md-3 | col-md-3 |
col-md-3 | col-md-3 |
col-md-3 | col-md-3 |
      col-md-6      |

而且我希望当元素最小化到智能手机的尺寸时，元素一个接一个地堆叠，就像当前正在发生的那样。

我在网上查找了一些示例代码，但没有帮助。有人可以就如何处理这个问题给我一些意见吗？

这是我当前的代码:

<div class="col-md-12" id="awards-logo">
  <div class="row">
    <div class="col-md-3" id="logo-one"><span class="helper"></span><img class="img-responsive" src="{{ asset('bundles/app/images/home/awards/exist.png') }}" data-toggle="tooltip" title="{{ 'about-us.awards.exist'|trans }}" alt="" /></div>
    <div class="col-md-3" id="logo-two"><span class="helper"></span><img class="img-responsive" src="{{ asset('bundles/app/images/home/awards/esf.jpg') }}" data-toggle="tooltip" title="{{ 'about-us.awards.esf'|trans }}" alt="" /></div>
    <div class="col-md-3" id="logo-three"><span class="helper"></span><img class="img-responsive" src="{{ asset('bundles/app/images/home/awards/eu.png') }}" data-toggle="tooltip" title="{{ 'about-us.awards.eu'|trans }}" alt="" /></div>
    <div class="col-md-3" id="logo-four"><span class="helper"></span><img class="img-responsive" src="{{ asset('bundles/app/images/home/awards/bmwi.jpg') }}" data-toggle="tooltip" title="{{ 'about-us.awards.bmwi'|trans }}" alt="" /></div>
  </div>
  <div class="row">
    <div class="col-md-3" id="logo-five"><span class="helper"></span><img class="img-responsive" src="{{ asset('bundles/app/images/home/awards/baystartup.jpg') }}" data-toggle="tooltip" title="{{ 'about-us.awards.baystartup'|trans }}" alt="" /></div>
    <div class="col-md-3" id="logo-six"><span class="helper"></span><img class="img-responsive" src="{{ asset('bundles/app/images/home/awards/grm.jpg') }}" data-toggle="tooltip" title="{{ 'about-us.awards.grm'|trans }}" alt="" /></div>
    <div class="col-md-6" id="logo-seven"><span class="helper"></span><img class="img-responsive" src="{{ asset('bundles/app/images/home/awards/lmu.jpg') }}" data-toggle="tooltip" title="{{ 'about-us.awards.lmu'|trans }}" alt="" /></div>
  </div>
</div>

Answer 1

尝试添加 col-xs-* 类，以便您可以控制智能手机上的网格行为。 我认为你想要实现的是:

  <div class="col-md-12 col-xs-12" id="awards-logo">
      <div class="row">
        <div class="col-md-3 col-xs-6" id="logo-one"><span class="helper"></span><img class="img-responsive" src="{{ asset('bundles/app/images/home/awards/exist.png') }}" data-toggle="tooltip" title="{{ 'about-us.awards.exist'|trans }}" alt="" /></div>
        <div class="col-md-3 col-xs-6" id="logo-two"><span class="helper"></span><img class="img-responsive" src="{{ asset('bundles/app/images/home/awards/esf.jpg') }}" data-toggle="tooltip" title="{{ 'about-us.awards.esf'|trans }}" alt="" /></div>
        <div class="col-md-3 col-xs-6" id="logo-three"><span class="helper"></span><img class="img-responsive" src="{{ asset('bundles/app/images/home/awards/eu.png') }}" data-toggle="tooltip" title="{{ 'about-us.awards.eu'|trans }}" alt="" /></div>
        <div class="col-md-3 col-xs-6" id="logo-four"><span class="helper"></span><img class="img-responsive" src="{{ asset('bundles/app/images/home/awards/bmwi.jpg') }}" data-toggle="tooltip" title="{{ 'about-us.awards.bmwi'|trans }}" alt="" /></div>
      </div>
      <div class="row">
        <div class="col-md-3 col-xs-6" id="logo-five"><span class="helper"></span><img class="img-responsive" src="{{ asset('bundles/app/images/home/awards/baystartup.jpg') }}" data-toggle="tooltip" title="{{ 'about-us.awards.baystartup'|trans }}" alt="" /></div>
        <div class="col-md-3 col-xs-6" id="logo-six"><span class="helper"></span><img class="img-responsive" src="{{ asset('bundles/app/images/home/awards/grm.jpg') }}" data-toggle="tooltip" title="{{ 'about-us.awards.grm'|trans }}" alt="" /></div>
        <div class="col-md-6 col-xs-12" id="logo-seven"><span class="helper"></span><img class="img-responsive" src="{{ asset('bundles/app/images/home/awards/lmu.jpg') }}" data-toggle="tooltip" title="{{ 'about-us.awards.lmu'|trans }}" alt="" /></div>
      </div>
    </div>

更多信息，看here在“混合:移动和桌面”部分。