引导媒体组件格式
引导媒体组件格式
提问于 2014-10-22 16:21:45
我正在尝试使用媒体组件在左边有一个图像，并给出右边的描述。然而，图像被粘在屏幕的左边。为了在这方面增加一个空白，我需要使用填充，但这会破坏引导组件兼容的移动版本。我如何做到这一点，而不破坏移动版本的引导？
谢谢。
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Projects</title>
<!-- Bootstrap -->
<link href="css/bootstrap.min.css" rel="stylesheet">
<link href="style.css" rel="stylesheet">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="js/bootstrap.min.js"></script>
</head>
<body>
<nav role="navigation" class="navbar navbar-default">
<div class="navbar-header">
<button type="button" data-target="#navbarCollapse" data-toggle="collapse" class="navbar-toggle">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a href="index" class="navbar-brand">Zarwan Hashem</a>
</div>
<div id="navbarCollapse" class="collapse navbar-collapse">
<ul class="nav navbar-nav">
<li><a href="index">Home</a></li>
<li class="active"><a href="#">Projects</a></li>
<li><a href="resume">Resume</a></li>
</ul>
<a class="navbar-brand pull-right">zarwan@zarwanhashem.com</a>
</div>
</nav>
<div class="media">
<a class="pull-left" href="#">
<img class="media-object" src="robotAI.png" alt="...">
</a>
<div class="media-body">
<h4 class="media-heading">Media heading</h4>
Testing test test
</div>
</div>
</html>CSS (55 if填充物只是为了看它是否会改变任何东西)：
body {
font-family: sans-serif;
padding-bottom:150px;
}
img {
padding-left: 55em;
}
@media only screen and (min-width: 48em) {
img {
padding-left: 50px;
}
}
p {
margin-right:15em;
padding-top:0;
font-size:1.2em;
}回答 3
Stack Overflow用户
回答已采纳
发布于 2014-10-22 16:37:08
第一解
使用如下所示的padding查询，根据屏幕大小添加@media：
img {
padding-left: 0;
}
@media only screen and (min-width: 48em) {
img {
padding-left: 20px;
}
} 第二解
它被认为是最好的做法，为您的内容包装将是80%或90%的页面宽度，并以margin: 0 auto;为中心。然后使用@media查询根据屏幕大小调整wrapper宽度(例如，对于移动设备)。
.wrapper {
width: 100%;
margin: 0 auto; /* to center your content in the middle of the page */
}
img {
width: 250px;
height: 250px;
}
.wrapper p {
display: inline-block;
}
@media only screen and (min-width: 48em) {
.wrapper {
width: 80%;
}
}<div class="wrapper">
<img src="http://lorempixel.com/250/250">
<p>Some text</p>
</div>
Stack Overflow用户
发布于 2014-10-22 17:13:58
第一件事是有一个非小型化的bootstrap.css版本来学习和理解在各种组件和元素上使用什么样式。
.media 组件没有响应，它是流动的。它没有媒体查询.
如果不想影响此组件的较小的视口显示，可以查看css，查看需要更改的内容，并按所选的最小宽度进行媒体查询。因此，您不会影响.media组件的其他用途，您将使用一个自定义类(任何您想要的)：
@media (min-width:768px) {
.media.custom .pull-left {padding-left:80px}
}这是使用像素来匹配bootstrap.css的默认大小。如果您的bootstrap.css正在使用它们，那么就进行调整。
<div class="media custom"> ...演示： http://jsbin.com/nopani/
Stack Overflow用户
发布于 2014-10-22 16:38:39
我会说，不要使用填充，因为它会使事情变得混乱和难以跟踪，相反，中心媒体div在页面上。
您需要在css中这样做，比如
.media {
width: 80%;
text-align: center;
}始终可以将.media更改为任何@media查询，以针对特定的设备/屏幕大小。
祝好运!
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/26512261
复制相关文章
相似问题
腾讯云开发者
