html - Bootstrap CSS - 媒体权利

Question

我正在尝试实现一些 Bootstrap css - 我不想要整个 css，所以我只是为某些组件(例如警报和媒体组件)复制了一些 css。

然而，media-right css 似乎不起作用。我有以下内容:

<style> 
  .media,
  .media-body {
   overflow: hidden;
   zoom: 1;
  }
 .media, .media .media {
   margin-bottom: 15px;
   position: relative;
   padding: 20px;
   border: 1px solid #ddd;
 }
.media-body,
.media-left,
.media-right {
   display: table-cell;
   vertical-align: top;
}
.media-middle {
   vertical-align: middle;
}
.media-left,
.media > .pull-left {
   padding-right: 25px;
}            
.media-right, 
.media > .pull-right {
    padding-left: 25px;
}
.media-object {
    display: block;
}
.media-heading {
   margin-top: 0;
    margin-bottom: 5px;
}
.media-body p {
     margin: 10px 0px 10px 0px;
}

<div class="media">
     <div class="media-body">
        <h4 class="media-heading">
            <a href="#">Football</a> 
        </h4>
        <p>xyz</p>
     </div>                                                                                                                     
     <div class="media-right" style="width:200px">
        <img class="media-object" src="xyx" alt="">
     </div>                                                         
</div>

图像位于媒体主体的右侧，但当内容不足时，图像看起来像是在中间。

我是否缺少某些 CSS，或者即使没有内容，我如何确保图像位于右侧？

Answer 1

您还需要从 @media 导入 CSS，那里有一些 pull-right 和 pull-left 类。它应该可以解决不同尺寸屏幕的问题。