如何使用引導程序使表響應並與圖像對齊
[英]How to make table responsive and align with the image using bootstrap
問題描述
我需要表格部分在圖像中對齊，但是我正在使用bootstrap container ， col-md-4並且在使用移動設備時我也需要お知らせ在頂部。
HTML：
<div class="container padding" id="temp">
<div class="row text-center padding">
<div class="col-md-4">
<img src="sbpage/img/img1.png">
<div class="txt">
<h3>かっこよく<br>
しっかり稼げる</h3>
<h4>
マグロなど一匹あたり約１～２萬円で<br>
売れるので月収100萬円も夢ではあ<br>
りません。目指せ年収1000萬円！
</h4>
</div>
</div>
<div class="col-md-4">
<img src="sbpage/img/img2.png">
<div class="txt">
<h3>大物釣って<br>
家族に自慢！</h3>
<h4>
自慢できる仕事ってそうそうあるもの<br>
ではない、がここにはある！うちの父<br>
ちゃんりょうマンやき！そんな聲が聞こ<br>
えてきそう。
</h4>
</div>
</div>
<div class="col-md-4">
<img src="sbpage/img/img3.png">
<div class="txt">
<h3>漁師になるなら<br>
土佐が一番！</h3>
<h4>
日本を代表する漁場といえば、何とい<br>
っても言わずと知れた南國土佐。釣っ<br>
た魚はおそらくどこにも負けない旨さ<br>
のものばかり！土佐の高知は日本一<br>
魚がうまい所なのです。
</h4>
</div>
</div>
</div>
</div>
CSS：
#temp h3{
color: #1D2087;
font-size: 33px;
margin-top: 55px;
font-weight: bold;
}
#temp .txt h4{
color: #1D2087;
font-size: 15px;
padding: 1% 0 0 12%;
font-weight: bold;
text-align: left;
}
#info{
background-color: #1D2087;
font-size: 19px;
color: white;
padding: 35px 1% 3% 25px;
margin-top: 55px;
}
.no1 {
font-weight: bold;
}
#info tr a{
color: white;
padding-left: 25px;
float: left;
}
#info tr td a:hover{
color: #ffff00;
}
3 個解決方案
解決方案1
1 2019-02-20 05:20:11
請注意，我已經使頁腳#info標題在較小的屏幕上從左對齊到居中。 圖像還具有響應性，因此它們不會在較小的屏幕上重疊。 圖像與#info邊框對齊。 這是您的更新代碼： Codepen
#temp h3 { color: #1D2087; font-size: 33px; margin-top: 55px; font-weight: bold; } #temp .txt h4 { color: #1D2087; font-size: 15px; padding: 1% 0 0 12%; font-weight: bold; text-align: left; } #info { background-color: #1D2087; font-size: 19px; color: white; padding: 35px 1% 3% 25px; margin-top: 55px; } .no1 { font-weight: bold; } #info a { color: white; padding-left: 25px; float: left; text-decoration: underline; } #info a:hover { color: #ffff00; text-decoration: none; } #info .txt { height: 2em; } .headin { text-align: center }
<head> <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous"> <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script> <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script> </head> <body> <div class="d-flex pt-4" id="temp"> <div class="col-md-4"> <img class="img-fluid" src="https://picsum.photos/900?image=0" alt=""> <div class="txt text-center"> <h3>かっこよく<br> しっかり稼げる</h3> <h4>マグロなど一匹あたり約１～２萬円で<br> 売れるので月収100萬円も夢ではあ<br> りません。目指せ年収1000萬円！ </h4> </div> </div> <div class="col-md-4"> <img class="img-fluid" src="https://picsum.photos/900?image=2" alt=""> <div class="txt text-center"> <h3>大物釣って<br> 家族に自慢！ </h3> <h4>自慢できる仕事ってそうそうあるもの<br> ではない、がここにはある！うちの父<br> ちゃんりょうマンやき！そんな聲が聞こ<br> えてきそう。 </h4> </div> </div> <div class="col-md-4"> <img class="img-fluid" src="https://picsum.photos/900?image=6" alt=""> <div class="txt text-center"> <h3>漁師になるなら<br> 土佐が一番！ </h3> <h4>日本を代表する漁場といえば、何とい<br> っても言わずと知れた南國土佐。釣っ<br> た魚はおそらくどこにも負けない旨さ<br> のものばかり！土佐の高知は日本一<br> 魚がうまい所なのです。 </h4> </div> </div> </div> <div class="d-flex p-3"> <div class="col-sm-12" id="info"> <div class="txt h5 text-xs-center text-sm-center text-md-left headin"> <b>お知らせ</b> </div> <div class="container-fluid"> <div class="row"> <div>2019.1.20 </div><a href="" class="col-10 text-left p-0">これはテストのための長いリンクです。</a> </div> <div class="row"> <div>2019.1.21 </div><a href="" class="col-10 text-left p-0">これもまた長いリンクです。</a> </div> </div> </div> </div> </body>
それが役立つことを願います
平和🖖
解決方案2
0 2019-02-20 04:18:26
我不確定您到底在尋找什么。 但是據我了解，將容器內的圖像寬度設置為100％將解決對齊問題。
.col-md-4 img{
width: 100%;
}
為了回答第二個問題（新聞表），您需要在標記中顯示新聞表，以便我為您提供解決方案。 干杯!
解決方案3
0 2019-02-20 04:39:27
希望這會幫助你。 我剛剛為<img>標簽創建了類。
.img
{
height: 30%;
width: 100%;
}
它顯示對齊的圖像。
<html> <head> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous"> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script> <style> #temp h3{ color: #1D2087; font-size: 33px; margin-top: 55px; font-weight: bold; } #temp .txt h4{ color: #1D2087; font-size: 15px; padding: 1% 0 0 12%; font-weight: bold; text-align: left; } .img { height: 30%; width: 100%; } #info{ background-color: #1D2087; font-size: 19px; color: white; padding: 35px 1% 3% 25px; margin-top: 55px; } .no1 { font-weight: bold; } #info tr a{ color: white; padding-left: 25px; float: left; } #info tr td a:hover{ color: #ffff00; } </style> </head> <body> <div class="container padding" id="temp"> <div class="row text-center padding"> <div class="col-md-4"> <img class="img" src="https://i.stack.imgur.com/ac47X.png"> <div class="txt"> <h3>かっこよ<br>しっかり稼げる</h3> <h4>マグロなど一匹あたり約１～２萬円で<br>売れるので月収100萬円も夢ではあ<br>りません。目指せ年収1000萬円！ </h4> </div> </div> <div class="col-md-4"> <img class="img" src="https://i.stack.imgur.com/ac47X.png"> <div class="txt"> <h3>大物釣って<br>家族に自慢！</h3> <h4>自慢できる仕事ってそうそうあるもの<br>ではない、がここにはある！うちの父<br>ちゃんりょうマンやき！そんな聲が聞こ<br>えてきそう。 </h4> </div> </div> <div class="col-md-4"> <img class="img" src="https://i.stack.imgur.com/ac47X.png"> <div class="txt"> <h3>漁師になるなら<br>土佐が一番！</h3> <h4>日本を代表する漁場といえば、何とい<br>っても言わずと知れた南國土佐。釣っ<br>た魚はおそらくどこにも負けない旨さ<br>のものばかり！土佐の高知は日本一<br>魚がうまい所なのです。 </h4> </div> </div> </div> <!--div class="d-flex p-3"--> <div class="row"> <div class="col-sm-12" id="info"> <div class="txt h5 text-xs-center text-sm-center headin" style="text-align:center;"> <b>お知らせ</b> </div> <div class="container-fluid"> <div class="row"> <div>2019.1.20 </div><a href="" class="col-10 text-left p-0">これはテストのための長いリンクです。</a> </div> <div class="row"> <div>2019.1.21 </div><a href="" class="col-10 text-left p-0">これもまた長いリンクです。</a> </div> </div> </div> </div> </div> </body> </html>
而且我已經使用了在線引導程序包。 而不是使用您下載的軟件包。 因此，您可以避免未捕獲的錯誤。
祝你好運。
如何在引導程序中制作垂直和水平對齊的響應式圖像
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.