Bootstrap 4 beta如何在文本后添加图像
Bootstrap 4 beta如何在文本后添加图像
提问于 2017-11-14 01:06:31
我有一个问题，添加一个图像在“菜单”部分的最后一个项目"Kava so sebou“后的文本。(图片应该垂直居中，行应该看起来像上面的其他项目。有什么建议吗？谢谢你的帮助。我刚学过bootstrap，我是个女孩。(搞笑组合)
自定义css
.menu {
padding: 70px 0px;
}
.menu .block > p {
color: #9D9D9D;
font-size: 16px;
line-height: 26px;
padding: 40px 133px 0;
text-align: center;
}
.menu .block .pricing-list {
padding-top: 5px;
}
.menu .block .pricing-list ul {
list-style-type: none;
padding: 0 0 30px;
margin: 0;
}
.menu .block .pricing-list ul li {
padding: 21px 0px;
}
.menu .block .pricing-list ul li .item .item-title {
position: relative;
}
.menu .block .pricing-list ul li .item .item-title h2 {
display: inline-block;
position: relative;
z-index: 99;
background: #fff;
}
.menu .block .pricing-list ul li .item .item-title .border-bottom {
position: absolute;
top: 0;
width: 100%;
height: 1px;
border: 1px dotted #C9C9C9;
margin-top: 40px;
}
.menu .block .pricing-list ul li .item .item-title .border-bottom-coffee {
position: absolute;
top: 50px;
width: 100%;
height: 1px;
border: 1px dotted #C9C9C9;
margin-top: 30px;
}
.menu .block .pricing-list ul li .item .item-title span {
float: right;
color: #938463;
}
.menu .block .pricing-list ul li .item .item-title span {
float: right;
color: #938463;
}
.menu .block .pricing-list ul li .item .item-title img {
padding-bottom: 20px;
}
.menu .block .pricing-list ul li .item p {
padding: 12px 0 0px;
color: #949494;
} <!-- Start Menu list -->
<section id="menu" class="menu">
<div class="container">
<div class="row">
<div class="col-md-12">
<div class="block">
<div class="pricing-list">
<div class="title">
<div class="container">
<ul>
<li class="wow fadeInUp" data-wow-duration="300ms" data-wow-delay="1100ms" style="visibility: visible; animation-duration: 300ms; animation-delay: 1100ms; animation-name: fadeInUp;">
<div class="item">
<div class="item-title">
<h2>Pivo 10 0.5L</h2>
<div class="border-bottom"></div>
<span>€ 1.20</span>
</div>
<p>Zlatý Bažant, Staropramen</p>
</div>
</li>
<li class="wow fadeInUp" data-wow-duration="300ms" data-wow-delay="1200ms" style="visibility: visible; animation-duration: 300ms; animation-delay: 1200ms; animation-name: fadeInUp;">
<div class="item">
<div class="item-title">
<h2>Káva so sebou </h2>
<div class="border-bottom"></div>
<span>€ 1.20</span>
</div>
<p>Štrbské Presso</p>
</div>
</li>
</ul>
</div>
</div><!-- block close -->
</div><!-- .col-md-12 close -->
</div><!-- .row close -->
</div><!-- .containe close -->
</section><!-- #price close -->
Stack Overflow用户
发布于 2017-11-14 02:08:02
您应该阅读bootstrap文档的这一部分，它将对像这样的任务非常有帮助：http://getbootstrap.com/docs/4.0/layout/media-object/
在这种情况下，您应该将容器div类设置为media，使用类media-body将文本覆盖到div，并使用图像将media-object添加到div。
然后，您只需要在css中做一些更改，它就会看起来很完美。
这是我快速编写的代码：
<div class="item">
<div class="item-title media">
<div class="media-body" style="white-space: nowrap;padding-top: 50px;">
<h2>Káva so sebou</h2>
</div>
<div class="media-object">
<img class="align-self-center mx-auto=" d-inline-block="" text-nowrap="" src="./images/coffee.jpg">
</div>
<div class="border-bottom-coffee" style="position:relative;"></div>
<span>€ 1.20</span>
</div>
</div>页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/47269777
复制相关文章
相似问题
腾讯云开发者
