Question

我正在尝试使用媒体组件在左侧显示图像，并对其进行描述。但是图像粘在屏幕的左侧。为了在那里增加一个空白，我需要使用填充，但这会混淆引导组件兼容的移动版本。如何在不破坏引导程序的移动版本的情况下执行此操作？

感谢。

<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（55em填充只是这样我可以试着看看它是否会改变任何东西）：

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

Answer 1

第一个解决方案

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

Answer 2

首先要有一个未缩小版本的bootstrap.css来学习和理解各种组件和元素使用的样式。

.media组件没有响应，它是流动的。它没有媒体查询。

如果您不想影响此组件的较小视口显示，您可以查看css，查看您需要更改的内容并以您选择的MIN宽度进行媒体查询。因此，您不会影响.media组件的其他用途，您将使用自定义类（您想要的任何内容）：

@media (min-width:768px) {
  .media.custom .pull-left {padding-left:80px}
}

这是使用像素来匹配bootstrap.css默认大小。如果你的bootstrap.css正在使用em，那么调整。

<div class="media custom"> ...

演示：http://jsbin.com/nopani/

Answer 3

我会说不要使用填充，因为它会让事情变得混乱而难以跟踪，而是将媒体div放在页面上。

您需要在css中执行此操作，例如

.media {
  width: 80%;
  text-align: center;
}

您始终可以将.media更改为任何@media查询，以定位特定设备/屏幕尺寸。

祝你好运！

Bootstrap媒体组件格式

3 个答案: