个人中心
gpt4 book ai didi

html - 如何使用 Bootstrap 使表格响应并与图像对齐

转载 作者：行者123 更新时间：2023-11-28 16:58:43 24 4
gpt4 key购买 nike

我需要表格部分在图像中对齐，但我使用的是 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;
}

Alignment

News table

最佳答案

请注意，我已将页脚 #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&nbsp;&nbsp;&nbsp;</div><a href="" class="col-10 text-left p-0">これはテストのための長いリンクです。</a>
        </div>
        <div class="row">
          <div>2019.1.21&nbsp;&nbsp;&nbsp;</div><a href="" class="col-10 text-left p-0">これもまた長いリンクです。</a>
        </div>
      </div>
    </div>
  </div>
</body>

そレガ役立つことを愿います

平和🖖

关于html - 如何使用 Bootstrap 使表格响应并与图像对齐，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/54778444/

24 4 0
文章推荐： html - Bootstrap 导航栏不适应容器
文章推荐： javascript - 下面的 JavaScript 语法是如何工作的？数组['push']('5')
文章推荐： php - 文件上的 SEO HTML 状态 301？
文章推荐： css - 为多个类(class)节省翻转卡悬停空间
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com