我想创建一个div作为一个按钮,它包含一个标志和一个国家的abv的图片,我已经把一些代码放到我想要的东西,但它不是自举的方式,我'我正在努力解决这个问题以及如何用引导程序来做这件事。
<div class="countrylink">
<div class="abvcountry">
AFG
</div>
<div class="countryflag">
<img src="../../Downloads/afghanistan_texture.gif">
</div>
这是造型。
.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%;
}
我觉得在移动设备或平板电脑上显示时,通过Bootstrap可以看起来好多了
答案 0 :(得分:2)
只需使用btn btn-lg
类作为a
代码的基础。
如果需要,您可以使用其中一个px-*
类进行水平填充控制:
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<p class="mb-0">px-3:</p>
<a class="btn btn-lg px-3 btn-primary" href="#" role="button">USA <img src="https://lipis.github.io/flag-icon-css/flags/4x3/us.svg" height="30" alt="USA flag"></a>
<p class="mb-0">px-4:</p>
<a class="btn btn-lg px-4 btn-primary" href="#" role="button">USA <img src="https://lipis.github.io/flag-icon-css/flags/4x3/us.svg" height="30" alt="USA flag"></a>
<p class="mb-0">px-5:</p>
<a class="btn btn-lg px-5 btn-primary" href="#" role="button">USA <img src="https://lipis.github.io/flag-icon-css/flags/4x3/us.svg" height="30" alt="USA flag"></a>
答案 1 :(得分:0)
感谢WebDevBooster的帮助!
我想出了一个我正在寻找的完美按钮:
.flg-btn {
width: 180px;
!important;
max-width: 180px;
margin-bottom: 20px;
margin-right: 20px;
padding-left: 0px !important;
padding-right: 6px !important;
padding-top: 6px !important;
padding-bottom: 6px !important;
}
.flg-list {
margin: 0;
max-width: 180px;
!important;
}
.flgpic {
width: 100px;
max-width: 100px;
!important;
}
.abv-txt {
margin-left: 8px;
margin-right: 2px !important;
width: 55px;
max-width: 55px;
!important;
}
&#13;
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<script defer src="https://use.fontawesome.com/releases/v5.0.6/js/all.js"></script>
<link rel="stylesheet" href="css/stylesheet.css">
<title>title</title>
</head>
<body>
<a class="btn btn-lg px-3 btn-outline-dark align-middle flg-btn" href="#" role="button">
<!-- ##### AFGHANISTAN ##### -->
<ul class="list-inline flg-list">
<li class="list-inline-item abv-txt">
<h5>AFG</h5>
<!-- -------------------------------------------------- #### !! ISO Alpha-3 CODES HERE !! #### -->
</li>
<li class="list-inline-item">
<img src="img/flags/af.svg" class="rounded flgpic" height="60" width="120" alt="USA flag">
</li>
</ul>
</a>
</body>
&#13;