我想创建一个按钮的 div,它包括一张国旗的图片和一个国家的 abv,我已经将一些代码放入我想要的内容中,但它不是引导程序的方式,我正在努力让我了解它以及如何使用引导程序来做到这一点。
<div class="countrylink">
<div class="abvcountry">
AFG
</div>
<div class="countryflag">
<img src="../../Downloads/afghanistan_texture.gif">
</div>
Run Code Online (Sandbox Code Playgroud)
这是样式。
.countrylink {
position:relative;
width: 260px;
height: 60px;
background:olivedrab;
margin-left: 55px;
margin-top: 20px;
float:left;
}
.abvcountry {
position:absolute;
display: inline;
background-color:#FFBF55;
width: 60px;
background:tomato;
height:60px;
left:0px;
}
.countryflag {
position: absolute;
display: inline;
background-color: #0FF;
width: 200px;
background: blue;
left: 60px;
height: 60px;
}
.countryflag img {
width: 100%;
height: 100%;
}
Run Code Online (Sandbox Code Playgroud)
我只是觉得在手机或平板电脑上显示时通过 Bootstrap 看起来会好很多