小编Rya*_*rds的帖子

Bootstrap 4 - 右侧带有文本和图像的自定义按钮,为引导程序弯曲

我想创建一个按钮的 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 看起来会好很多

html button twitter-bootstrap bootstrap-4

5
推荐指数
1
解决办法
2万
查看次数

标签 统计

bootstrap-4 ×1

button ×1

html ×1

twitter-bootstrap ×1