Question

我写了这段代码：

call_user_func_array( ''.$class.'::'.$method, $arr );

当我在全窗口打开我的网站时，一切都很好但是当我调整窗口大小以查看它在手机上的外观时，媒体对象没有响应。我想在小屏幕设备上显示图片下方的文字。请帮我怎么做。

Answer 1

将 flexbox 实用程序类添加到媒体对象：

<div class="media d-flex flex-column">

您还可以通过向媒体正文和媒体图像添加 class="order-1" 和 class="order-2" 来调整媒体对象中某些元素的顺序。

https://getbootstrap.com/docs/4.5/utilities/flex/

我还在特定的断点处将内容居中对齐：

@media screen and (max-width: 480px) {

    .media-body {
        padding-top: 1em;
        text-align: center !important;
        margin: 0 !important;
    }

    .media img {
        margin: 0 auto;
    }
}

Answer 2

@media screen and (max-width : 768px){

}

更改该标记内的css，例如：

@media screen and (max-width : 768px){
    .lead{
    margin-left: auto !important;
    margin-right: auto !important;
    display: block !important;
    }
}

Answer 3

Bootstrap 4已经是Alpha版本，并且根据官方网站

<div class="container-fluid">     
  <div class="row">
    <div class="col-xs col-xm">
      <div class="media text-xs-left">       
        <div class="media-left media-middle">              
          <p class="lead">                
            <img src="default.jpg">              
          </p>            
        </div>            
        <div class="media-body">              
          <p class="lead">                
            <h6>here text</h6>              
          </p>            
        </div>          
      </div>
    </div>
  </div>
</div>

请参阅http://v4-alpha.getbootstrap.com/

至于你的问题，请参考bootstrap的网格系统，它在他们的网站http://getbootstrap.com/css/#grid-options中得到了很好的解释

你必须在你的代码中做这样的事情

.container-fluid

输入您的代码div.row div，然后添加div.col-xs和div.col-sm或int nomatch = 1; while( nomatch ){ nomatch = (test_value(a++) != k); nomatch &&= (test_value(a++) != k); nomatch &&= (test_value(a++) != k); nomatch &&= (test_value(a++) != k); nomatch &&= (test_value(a++) != k); }。这些类是负责在不同屏幕尺寸下更好地响应布局的示例。

Bootstrap 4中的响应“媒体”

3 个答案: