4

我写了这段代码：

      <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>

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

4

4 回答 4

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;
    }
}
于 2021-01-14T14:38:26.890 回答
0 

<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>Navbar</title>
  <style>
    @media screen and (max-width:768px){
      h6{
        font-size: 20px;
      }  
    }
    body{
      padding:10px;
    }
  </style>
</head>
<body>
  <div class="row"> 
<div class="col-xs-12">   <img style="width:180px;height:90px" src="https://www.google.co.in/images/nav_logo242.png"> </div>
         
       
   <div class="col-xs-12">    <h6>here texthere texthere texthere texthere texthere texthere texthere texthere texthere texthere texthere texthere texthere texthere texthere texthere texthere texthere texthere texthere texthere texthere texthere texthere texthere texthere text</h6> </div>
  </div>        
</body>
</html>

每当您制作任何设备响应式网页时，请从制作移动设备开始，然后继续制作更大的设备。这是最好和最简单的方法。所以，我在这里按照你所说的移动设备制作。

于 2016-04-10T08:01:06.077 回答
0

Bootstrap 4 还处于 Alpha 版本，根据官方网站

Not yet available, but hopefully soon!

见http://v4-alpha.getbootstrap.com/

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

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

<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>

放入您的代码.container-fluiddiv 并添加div.row和div.col-xs或div.col-sm下一步。这些类是负责更好地响应不同屏幕尺寸的布局的示例。

于 2016-04-09T14:48:04.460 回答
0 
@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;
    }
}
于 2016-04-09T14:34:46.917 回答