引导CSS - 媒体权

Question

我想实现一些引导CSS - 我不想整个CSS所以我只是复制了一些CSS的某些成分，如警报和媒体组件。

然而，媒体权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班那里。它应该解决您的问题对不同尺寸的屏幕。