前提・実現したいこと
bootstrap4で画像と文章を横並びにしたいがうまく表示できない。
該当のソースコード
<div class="row"> <div class="client voice clearfix col-md-8 col-md-offset-2"> <div class="col-4"> <img src="img/take.jpg" class="img-fluid"> </div> <div class="col-8"> <p>リモートワークという言葉がありますが、弊社では何も気にしません。求めるのは快適なコミュニケーションと信頼と成果物のみ。</br> <small>kred IT abroad.inc代表取締役 横田 猛夫</small> </p> </div> </div>
media only screen and (max-width: 1190px) and (min-width: 768px) .answer .client.voice { max-width: calc(100% - 40px); margin: 0 auto; } .answer .client.voice { padding: 20px 0; font-size: 18px; text-align: left; font-style: italic; color: #777; } @media (min-width: 768px) .col-md-8 { -ms-flex: 0 0 66.666667%; flex: 0 0 66.666667%; max-width: 66.666667%; } .col, .col-1, .col-10, .col-11, .col-12, .col-2, .col-3, .col-4, .col-5, .col-6, .col-7, .col-8, .col-9, .col-auto, .col-lg, .col-lg-1, .col-lg-10, .col-lg-11, .col-lg-12, .col-lg-2, .col-lg-3, .col-lg-4, .col-lg-5, .col-lg-6, .col-lg-7, .col-lg-8, .col-lg-9, .col-lg-auto, .col-md, .col-md-1, .col-md-10, .col-md-11, .col-md-12, .col-md-2, .col-md-3, .col-md-4, .col-md-5, .col-md-6, .col-md-7, .col-md-8, .col-md-9, .col-md-auto, .col-sm, .col-sm-1, .col-sm-10, .col-sm-11, .col-sm-12, .col-sm-2, .col-sm-3, .col-sm-4, .col-sm-5, .col-sm-6, .col-sm-7, .col-sm-8, .col-sm-9, .col-sm-auto, .col-xl, .col-xl-1, .col-xl-10, .col-xl-11, .col-xl-12, .col-xl-2, .col-xl-3, .col-xl-4, .col-xl-5, .col-xl-6, .col-xl-7, .col-xl-8, .col-xl-9, .col-xl-auto { position: relative; width: 100%; padding-right: 15px; padding-left: 15px; } *, ::after, ::before { box-sizing: border-box; } user agent stylesheet div { display: block; }
.answer .client.voice { padding: 20px 0; font-size: 18px; text-align: left; font-style: italic; color: #777; } .answer { padding: 40px 0; text-align: center; } body { margin: 0; font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,"Noto Sans",sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji"; font-size: 1rem; font-weight: 400; line-height: 1.5; color: #212529; text-align: left; background-color: #fff; } <style>…</style> body { font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", sans-serif; letter-spacing: 1.5px; } body, p, h1, h2, h3, h4, h5, h6 { text-rendering: optimizeLegibility; iased: ; }
lement.style { } .col-8 { -ms-flex: 0 0 66.666667%; flex: 0 0 66.666667%; max-width: 66.666667%; float: left; } .col, .col-1, .col-10, .col-11, .col-12, .col-2, .col-3, .col-4, .col-5, .col-6, .col-7, .col-8, .col-9, .col-auto, .col-lg, .col-lg-1, .col-lg-10, .col-lg-11, .col-lg-12, .col-lg-2, .col-lg-3, .col-lg-4, .col-lg-5, .col-lg-6, .col-lg-7, .col-lg-8, .col-lg-9, .col-lg-auto, .col-md, .col-md-1, .col-md-10, .col-md-11, .col-md-12, .col-md-2, .col-md-3, .col-md-4, .col-md-5, .col-md-6, .col-md-7, .col-md-8, .col-md-9, .col-md-auto, .col-sm, .col-sm-1, .col-sm-10, .col-sm-11, .col-sm-12, .col-sm-2, .col-sm-3, .col-sm-4, .col-sm-5, .col-sm-6, .col-sm-7, .col-sm-8, .col-sm-9, .col-sm-auto, .col-xl, .col-xl-1, .col-xl-10, .col-xl-11, .col-xl-12, .col-xl-2, .col-xl-3, .col-xl-4, .col-xl-5, .col-xl-6, .col-xl-7, .col-xl-8, .col-xl-9, .col-xl-auto { position: relative; width: 100%; padding-right: 15px; padding-left: 15px; } *, ::after, ::before { box-sizing: border-box; } user agent stylesheet div { display: block; } .answer .client.voice { padding: 20px 0; font-size: 18px; text-align: left; font-style: italic; color: #777; } .answer { padding: 40px 0; text-align: center; } ```![イメージ説明](601eb9f7f5edef4c09e5706414fb6388.png) ### 試したこと floatを使用したがうまくレイアウトできない。 ### 補足情報(FW/ツールのバージョンなど)