响应“媒体” 4

我写了这个代码：响应“媒体” 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>

而且一切都很好，当我在全窗口中打开我的网站，但是当我调整窗口，看看如何将它看起来在移动电话，媒体对象不响应。我想在小屏幕设备上的图片下方显示文字。请帮助我如何去做。

来源

2016-04-09 charliepl

@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-09 14:34:46

引导4是Alpha版本还根据官方网站

Not yet available, but hopefully soon!

看到http://v4-alpha.getbootstrap.com/

至于你的问题，请参考bootstrap网格系统，它是wel l在其网站上解释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-fluid格，并添加div.row和div.col-xs或div.col-sm下一个。这些类是负责在不同屏幕尺寸下更好地响应您的布局的示例。

来源

2016-04-09 14:48:04 Fil

您的代码看起来不错，但在小屏幕尺寸上图像仍然靠近文字。例如，在iPhone 5s上，图片占据了大部分空间，而且太小的空间可以舒适地阅读文本。 – charliepl

我想你应该在图像上使用'.image-responsive'类，并调整像这样''的css'max-width'和'max-height''也看到这个http://www.w3schools.com/bootstrap/ tryit.asp？文件名= trybs_ref_img响应＆堆叠=小时。您也不必限制使用div来包装'' – Fil

<!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-10 08:01:06 Manish62

响应“媒体” 4

回答

相关问题