css 如何使Bootstrap列都具有相同的高度和间距？

ma8fv8wu 于 2023-02-10 发布在 Bootstrap

关注(0)|答案(3)|浏览(185)

我正在使用Bootstrap。我怎样才能使三个列都相同的高度包括差距？这里是截图;
Screenshot
下面是代码;

<div class="container">
  <div class="row mt-4">
    <div class="col-12 col-md-6 col-xl-4 service mt-4">
      <div class="p-3">
        <div class="icon">
          <i class="fa-solid fa-laptop-code fs-1"></i>
        </div>
        <h5 class="mb-4 mt-2">Web Development</h5>
        <p>I provide full Web Development according to your needs.</p>
      </div>
    </div>
    <div class="col-12 col-md-6 col-xl-4 service mt-4">
      <div class="p-3">
        <div class="icon">
          <i class="fa-solid fa-palette fs-1"></i>
        </div>
        <h5 class="mb-4 mt-2">Web Design</h5>
        <p>I will do the best and most Modern Web App Designs for your website.</p>
      </div>
    </div>
    <div class="col-12 col-md-6 col-xl-4 service mt-4">
      <div class="p-3">
        <div class="icon">
          <i class="fa-solid fa-mobile-screen-button fs-1"></i>
        </div>
        <h5 class="mb-4 mt-2">Responsive Design</h5>
        <p>Fully Responsive Design using Bootstrap or Media Queries.</p>
        </div>
      </div>
    </div>
  </div>

下面是一些CSS;

.p-3{
  text-align: center;
  background: #202020;
  border-radius: 10px;
}

css

来源：https://stackoverflow.com/questions/75400956/how-can-i-make-bootstrap-columns-all-the-same-height-with-gap

3条答案

按热度按时间

wf82jlnq1#

将height: 100%添加到类p-3将解决该问题。
如下所示编辑CSS;

.p-3{
  height: 100%;       //add this to the CSS code
  text-align: center;
  background: #202020;
  border-radius: 10px;
}

赞(0）回复(0）举报 2023-02-10

lnlaulya2#

试试这个

.row>div {
  display: grid;
}

赞(0）回复(0）举报 2023-02-10

i86rm4rw3#

超文本标记语言

<div id="myContainer" class="col-md-12">
        <div class="col-md-4" id="myItem">
            <div id= "myCard">
                this is my item
            </div>
        </div>
        <div class="col-md-4" id="myItem">
            <div id= "myCard">
                this is my item
            </div>
        </div>
        <div class="col-md-4" id="myItem">
            <div id= "myCard">
                this is my item
            </div>
        </div>
    </div>

CSS

#myContainer{
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    justify-content: center;
}
#myItem{
    display:flex;
    align-items: center;
    justify-content: center;
}
#myCard{
    height:100px;
    width:200px;
    background-color: blue;
    height:300px;
    width:95%;
}

赞(0）回复(0）举报 2023-02-10

我来回答

css 如何使Bootstrap列都具有相同的高度和间距？

3条答案

相关问题

热门标签

最新问答