web-dev-qa-db-ja.com

Bootstrap 4-テキストと画像が右側にあるカスタムボタン、bootstrap

ボタンである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モバイルまたはタブレットで表示すると、見栄えがよくなると思います

htmltwitter-bootstrapbuttonbootstrap-4
4
Ryan.Edwards

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>
6
WebDevBooster

助けてくれてありがとう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;
}
<!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>
0
Ryan.Edwards