Bootstrap 4 中文开发手册
简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
Verzeichnis suchen
Getting started Accessibility（无障碍） Browsers and devices（浏览器和设备） Build tools（构建工具） Contents（内容） Download（下载） JavaScript Theming Bootstrap（主题Bootstrap） Webpack Components: Alerts Alerts（警报） Components: Badges Badges（徽章） Components: Breadcrumb Breadcrumb Components: Button group Button group（按钮组） Components: Buttons Buttons（按钮） Components: Cards Components: Carousel Cards（卡） Carousel（圆盘传送带） Components: Collapse Collapse（折叠） Components: Dropdowns Dropdowns（下拉菜单） Components: Forms Forms（表单） Components: Input group Input group（输入群组） Components: Input group Jumbotron（广告大屏幕） Components: List group List group（列表组） Components: Modal Modal（互动视窗） Components: Navbar Navbar（导航栏） Components: Navs Navs（导航栏） Components: Pagination Pagination（分页） Components: Popovers Popovers（弹出框） Components: Progress Progress（进度条） Components: Scrollspy Scrollspy（滚动监听） Components: Tooltips Tooltips（提示工具） Content Code（代码） Figures（图片区） Images（图片） Reboot（重置） Tables（表格） Typography（排版） Layout Grid（网格） Layout（布局） Media object（多媒体对象） Utilities for layout（排版通用类别） Migration Migrating to v4（迁移到v4） Utilities Borders（边框） Clearfix（清除浮动） Close icon（关闭图标） Colors（颜色） Display property（显示属性） Embeds（内嵌） Flex（弹性） Float（浮动） Image replacement（图像替换） Position（位置） Screenreaders（荧幕阅读器） Sizing（尺寸） Spacing（间隔） Text（文本） Vertical alignment（垂直对齐） Visibility（能见度）

©
Dieses Dokument verwendet PHP-Handbuch für chinesische Websites Freigeben

Figuren

Bootstrap 媒体对象的文档和示例，构建博客评论，推文等高度重复的组件。

例

媒体对象有助于建立复杂的和重复的成分，其中一些媒体被定位旁边内容不环绕，所述媒体。另外，Flexbox 只需要两个必需的类。

以下是单个媒体对象的示例。只需要两个类 - 包装.media和.media-body你的内容。可选的填充和边距可以通过间隔工具进行控制。

<div class="media">  <img class="mr-3" src="..." alt="Generic placeholder image">  <div class="media-body">    <h5 class="mt-0">Media heading</h5>
    Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.  </div></div>
Flexbug＃12：内联元素不被视为弹性项目

Internet Explorer 的10-11不会使内联元素类似的链接或图片（或::before和::after伪元素）作为柔性物品。唯一的解决方法是设置一个非内联display的值（例如，block，inline-block，或flex）。我们建议使用.d-flex我们的显示实用程序之一作为简单的修复。

Nesting

媒体对象可以无限嵌套，但我们建议您在某个时候停下来。嵌套.media在.media-body父媒体对象中的地方。

<div class="media">  <img class="mr-3" src="..." alt="Generic placeholder image">  <div class="media-body">    <h5 class="mt-0">Media heading</h5>
    Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.    <div class="media mt-3">      <a class="pr-3" href="#">        <img src="..." alt="Generic placeholder image">      </a>      <div class="media-body">        <h5 class="mt-0">Media heading</h5>
        Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.      </div>    </div>  </div></div>

对齐

媒体对象中的媒体可以与 Flexbox 实用程序一起对齐到内容的顶部（默认），中间或结尾.media-body。

<div class="media">  <img class="align-self-start mr-3" src="..." alt="Generic placeholder image">  <div class="media-body">    <h5 class="mt-0">Top-aligned media</h5>    <p>Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.</p>    <p>Donec sed odio dui. Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p>  </div></div>


<div class="media">  <img class="align-self-center mr-3" src="..." alt="Generic placeholder image">  <div class="media-body">    <h5 class="mt-0">Center-aligned media</h5>    <p>Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.</p>    <p class="mb-0">Donec sed odio dui. Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p>  </div></div>


<div class="media">  <img class="align-self-end mr-3" src="..." alt="Generic placeholder image">  <div class="media-body">    <h5 class="mt-0">Bottom-aligned media</h5>    <p>Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.</p>    <p class="mb-0">Donec sed odio dui. Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p>  </div></div>

命令

通过修改HTML本身或通过添加一些自定义 Flexbox CSS 来设置order属性（以您选择的整数）更改媒体对象中内容的顺序。

<div class="media">  <div class="media-body">    <h5 class="mt-0 mb-1">Media object</h5>
    Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.  </div>  <img class="ml-3" src="..." alt="Generic placeholder image"></div>

媒体名单

由于媒体对象的结构要求非常少，您还可以在列表 HTML 元素上使用这些类。在你的<ul>或<ol>，添加.list-unstyled删除任何浏览器的默认列表样式，然后申请.media你<li>的。与往常一样，在需要的地方使用间隔工具进行微调。

<ul class="list-unstyled">  <li class="media">    <img class="mr-3" src="..." alt="Generic placeholder image">    <div class="media-body">      <h5 class="mt-0 mb-1">List-based media object</h5>
      Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.    </div>  </li>  <li class="media my-4">    <img class="mr-3" src="..." alt="Generic placeholder image">    <div class="media-body">      <h5 class="mt-0 mb-1">List-based media object</h5>
      Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.    </div>  </li>  <li class="media">    <img class="mr-3" src="..." alt="Generic placeholder image">    <div class="media-body">      <h5 class="mt-0 mb-1">List-based media object</h5>
      Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.    </div>  </li></ul>
Vorheriger Artikel： Nächster Artikel：