代码之家  ›  专栏  ›  技术社区  ›  MK-DK

将引导3个按钮设置为在卡片中具有相同位置

twitter-bootstrap css html
  •  0
  • MK-DK  · 技术社区  · 7 年前

    我正在尝试将引导3个按钮在水平线上对齐,如下图所示。这里是my demosite until now.>我可以将按钮与设置边距对齐,但在所有的视区上看起来都不错似乎是一个难题。

    有没有一个聪明的方法来对齐按钮?

    我试过删除这么多与问题无关的代码。因此,下面的代码中没有使用一些CSS类: 

    track and trace*/
.bs调用操作{
职位:相对;
宽度:自动;
填料:15px 25px;
边框:1倍纯黑;
上边距:10px;
底部边缘:10px;
边界半径:5px;
}

.BS CallToAction>。行{
显示:表格;
宽度:计算值(100%+30px);
}

.bs callToAction>.row>[class^=“col-”],
.bs callToAction>.row>[类*=“col-”]{
浮动:无;
显示:表格单元格;
垂直对齐:中间;
}

.cta内容{
填充顶部:10px;
垫底:10px;
}

.cta标题{
边距:0自动15px;
填充:0;
}

.cta说明{
填充:0;
}

.cta desc p:最后一个孩子{
下边距:0;
}

.cta按钮{
填充顶部:10px;
垫底:10px;
}

@介质(最大宽度:991px){
.BS CallToAction>。行{
显示:块;
宽度:自动;
}

.bs callToAction>.row>[class^=“col-”],
.bs callToAction>.row>[类*=“col-”]{
浮动:无;
显示:块;
垂直对齐:中间;
职位:相对;
}

.cta内容{
文本对齐:居中;
}
}


.bs callToAction.bs callToAction信息{
颜色:fff;
背景色:5bc0de;
边框颜色:46B8DA;
}


.bs-callToAction.bs-callToAction-info.cta按钮.btn{
边框颜色:fff;
}

ABC {
职位:相对;
}
DEF{
位置:绝对;
顶部:10px;
右:20px;
最大宽度:300px;
}

@媒体屏幕和(最大宽度:480px){
DEF{
顶部:50%;
左:50%;
转换:转换(-50%,-50%);
最大宽度:480px;
宽度:95%;
高度:85%;
}
.panel.panel-default.panel标题{
填料:5px 15px;
}
.panel.panel-default.panel体{
填料:5px;
}


}

/*网格CSS*/
P.底柱颜色{
字体大小:0.82em;
颜色:绿色;
}

.索引内容A:悬停{
颜色:黑色;
文字装饰:无;
}
.索引内容.行{
上边距:20px;
}
.索引内容A{
颜色:黑色;
}
.索引内容.card{
背景色:ffffff;
填充:0;
-WebKit边框半径:4px;
-Moz边界半径:4px;
边界半径:4px;
盒影:0 4px 5px 0 rgba(0,0,0,0.14),0 1px 10px 0 rgba(0,0,0,0.12),0 2px 4px-1px rgba(0,0,0,0.3);
}
.索引内容.卡:悬停{
盒影:0 16px 24px 2px rgba(0,0,0,0.14),0 6px 30px 5px rgba(0,0,0,0.12),0 8px 10px-5px rgba(0,0,0,0.3);
颜色:黑色;
}
.索引内容.card img{
宽度:100%;
边框左上半径:4px;
边框右上半径:4px;
}
.索引内容.卡H4{
裕度:20px;
}
.索引内容.卡P{
裕度:20px;
不透明度:0.65;
}
.索引内容.cta{
宽度:235px;
-WebKit转换:背景色1s,颜色1s;
/*对于Safari 3.1至6.0*/
过渡:背景色0.5s,颜色0.5s;
最小高度:20px;
背景色:4caf50;
颜色:ffffff;
边界半径:4px;
文本对齐:居中;
字体粗细:较轻;
页边:0px 20px 15px 20px;
衬垫:5px 0px;
显示:内联块;
}
.索引内容.cta:悬停{
背景色:
颜色:002E5b;
}
/*设置块元素之间的宽度*/
.小填充.top{
填充顶部:10px;
}

.小填充.bottom{
垫底:10px;
}
.小填充。左{
左侧填充:5px;
}

.小填充。右{
右侧填充:5px;
}

.row[class*=“列-”]{
左侧填充:5px;
右侧填充:5px;
}

.页边距\底部{
底部边缘:10px;
}
.row[class*=“列-”]{
右侧填充:5px;
左侧填充:5px;
}
行{
左边距:-5px;
右边距:-5px;
}
.卡img底部{
颜色:fff;
高度:20rem;
背景:url(images/img1.jpg)center no repeat;
背景尺寸:封面;
}
.img响应{
高度:100%;
}

/*设置列的全宽*/
@介质(最大宽度:768px){
.img响应{
宽度:100%;
}
.索引内容.card img{
高度:100%
}
}

@介质(最大宽度:991px){
H3{
字体大小:1.2em;

}
}

/*网格元素媒体查询*/
@介质(最小宽度:768px){
.卡片{
职位:相对;
}
.卡片内容{
位置:绝对;
底部:0;
宽度:100%;
背景:rgba(0,0,0,0.5);
}
.卡内容h4,
.卡片内容P{
颜色:白色;
宽度:100%;
浮动:左;
裕度:0 0 5px;
}
.卡内容A{
浮动:右;
}
.索引内容.卡H4,
.索引内容.卡P{
填料:15px 20px;
边距:0;
}
.索引内容.卡P{
填料:0 20px 15px;
边距:0;
}
.card内容文本框{
位置:绝对;
顶部:0;
左:0;
背景:RGBA(255、255、255、0.7);
/*右:0;*//*右上方位置*/
裕度:15px;
最大宽度:300px;
高度:91%
}
}
.左下角{
位置:静态;
左边距:15px;
页底:15px;
底部:8px;
左:16px;
}
@介质(最大宽度:993px){
DEF{
职位:相对;
顶部:自动;
右:自动;
}
}
@介质(最大宽度:480px){
DEF{
职位:相对;
顶部:170px;
右:自动;
}
}
    文档类型HTML>
<html lang=“en”>
<头部>
<title>Kontakt测试</title>
<meta charset=“utf-8”>
<meta name=“viewport”content=“width=device width,initial scale=1”>
<link rel=“stylesheet”href=“https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css”>
<script src=“https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js”></script>
<script src=“https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js”></script>

<link rel=“stylesheet”href=“https://use.fontawome.com/releases/v5.1.0/css/all.css”integrity=“sha384-lkuwvrzot6uhsbfcmvokwlcmgc0tawr+30hwe3a4ltabwtzytegf5tjv8tbt”crossorigin=“anonymous”>
&!--trustbox脚本-->
<script type=“text/javascript”src=“//widget.trustpilot.com/bootstrap/v5/tp.widget.bootstrap.min.js”异步></script>
&!--结束trustbox脚本-->
</head>
<正文>

<div class=“container”>
<DIV class=“row”>
<DIV class=“col-xs-12 col-sm-3小填充右下”>
<div class=“index content”>
<div class=“card”>
<img src=“http://www.hdnicewallpapers.com/walls/thumb/other%20动物/zebra_animal_hd_wallpaper.jpg”></img>
<DIV>
<h4>标题1</h4>
<p class=“bottom column color”>lorem ipsum dolor sit amet,Concettetur adipiscing elit,sed do eiusmod tempor incidedunt ut labore et dolore magna aliqua.埃尼姆语和minim veniam</p>

<p class=“bottom column color”>lorem ipsum dolor sit amet,Concettetur adipiscing elit,sed do eiusmod tempor incidedunt ut labore et dolore magna aliqua.埃尼姆语和minim veniam</p>

<p class=“bottom column color”>lorem ipsum dolor sit amet,Concettetur adipiscing elit,sed do eiusmod tempor incidedunt ut labore et dolore magna aliqua.埃尼姆语和minim veniam</p>

<p class=“bottom column color”>lorem ipsum dolor sit amet,Concettetur adipiscing elit,sed do eiusmod tempor incidedunt ut labore et dolore magna aliqua.埃尼姆语和minim veniam</p>
<button type=“button”class=“btn btn success bottom left”>请参阅此处提供的内容</button>
</DIV>
</DIV>
</DIV>
</DIV>
<DIV class=“col-xs-12 col-sm-3小填充右下”>
<div class=“index content”>
<div class=“card”>
<img src=“http://www.hdnicewallpapers.com/walls/thumb/other%20动物/zebra_animal_hd_wallpaper.jpg”></img>
<DIV>
<h4>标题2</h4>
<p class=“bottom column color”>lorem ipsum dolor sit amet,consectutetur adipiscing elit,sed do eiusmod tempor incidudunt ut</p>

<p class=“bottom column color”>lorem ipsum dolor sit amet,Concettetur adipiscing elit,sed do eiusmod tempor incidedunt ut labore et dolore magna aliqua.只有一点鹿肉。Lorem Ipsum Dolor Sit Amet,Concettetur Adipiscing Elite,Sed do Eiusmod Tempor</p>

<p class=“bottom column color”>lorem ipsum dolor sit amet,Concettetur adipiscing elit,sed do eiusmod tempor incidedunt ut labore et dolore magna aliqua.埃尼姆语和minim veniam</p>

<p class=“bottom column color”>lorem ipsum dolor sit amet,Concettetur adipiscing elit,sed do eiusmod tempor incidedunt ut labore et dolore magna aliqua.埃尼姆语和minim veniam</p>
<button type=“button”class=“btn btn success bottom left”>阅读更多信息</button>
</DIV>
</DIV>
</DIV>
</DIV>
<DIV class=“col-xs-12 col-sm-3小填充右下”>
<div class=“index content”>
<div class=“card”>
<img src=“http://www.hdnicewallpapers.com/walls/thumb/other%20动物/zebra_animal_hd_wallpaper.jpg”></img>
<DIV>
<h4>标题3</h4>
<p class=“bottom column color”>lorem ipsum dolor sit amet,Concettetur adipiscing elit,sed do eiusmod tempor incidedunt ut labore et dolore magna aliqua.只有一点鹿肉。Lorem Ipsum Dolor Sit Amet,Concettetur Adipiscing Elite,Sed do Eiusmod Tempor</p>

<p class=“Bottom Column Color”>Labore et Dolore Magna Aliqua。只有一点鹿肉。Lorem Ipsum Dolor Sit Amet,Concettetur Adipiscing Elite,Sed do Eiusmod Tempor</p>

<p class=“Bottom column color”>多洛尔·马格纳·阿利奎。只有一点鹿肉。洛雷姆·伊普索姆·多尔·西特·阿米特,一位全神贯注的爱的精英,一位速度超群的爱斯莫德。连续的爱的精英,塞德做伊乌斯莫德节奏</p>
<button type=“button”class=“btn btn success bottom left”>阅读更多信息</button>
</DIV>
</DIV>
</DIV>
</DIV>
<DIV class=“col-xs-12 col-sm-3小填充右下”>
<div class=“index content”>
<div class=“card”>
<img src=“http://www.hdnicewallpapers.com/walls/thumb/other%20动物/zebra_animal_hd_wallpaper.jpg”></img>
<DIV>
<h4>标题4</h4>
<p class=“Bottom Column Color”>ut Enim ad Minim Veniam。Lorem Ipsum Dolor Sit Amet,Concettetur Adipiscing Elite,Sed do Eiusmod Tempor</p>

<p class=“bottom column color”>lorem ipsum dolor sit amet,Concettetur adipiscing elit,sed do eiusmod tempor incidedunt ut labore et dolore magna aliqua.只有一点鹿肉。Lorem Ipsum Dolor Sit Amet,Concettetur Adipiscing Elite,Sed do Eiusmod Tempor</p>

<p class=“Bottom Column Color”>包括Labore et Dolore Magna Aliqua。只有一点鹿肉。洛雷姆·伊普索姆·多洛·西特·阿美,神圣的爱的精英。杜伊丝·奥特·多洛尔(duis aute irure dolor in reprehenderit)在巴黎的富家大酒店(voluptate velit esse cillum dolore eu fugiat nulla pariatur).</p>
<button type=“button”class=“btn btn success bottom left”>阅读更多信息</button>
</DIV>
</DIV>
</DIV>
</DIV>
</DIV>
</DIV>>=
    
   
    
   < / div. 我可以将按钮与设置边距对齐,但在所有的视区上看起来都不错似乎是一个难题。
   
    
   
    
   
    
    有没有一个聪明的方法来对齐按钮?
   
    
   
    
    
     enter image description here
    
   
    
   
    
   
    
   
    
    我试过删除这么多与问题无关的代码。因此,以下代码中不使用某些CSS类:
   
    
   
    
   
    
   
    
    
    
     
    /* Track and trace */
.bs-calltoaction{
    position: relative;
    width:auto;
    padding: 15px 25px;
    border: 1px solid black;
    margin-top: 10px;
    margin-bottom: 10px;
    border-radius: 5px;
}

    .bs-calltoaction > .row{
        display:table;
        width: calc(100% + 30px);
    }
     
        .bs-calltoaction > .row > [class^="col-"],
        .bs-calltoaction > .row > [class*=" col-"]{
            float:none;
            display:table-cell;
            vertical-align:middle;
        }

            .cta-contents{
                padding-top: 10px;
                padding-bottom: 10px;
            }

                .cta-title{
                    margin: 0 auto 15px;
                    padding: 0;
                }

                .cta-desc{
                    padding: 0;
                }

                .cta-desc p:last-child{
                    margin-bottom: 0;
                }

            .cta-button{
                padding-top: 10px;
                padding-bottom: 10px;
            }

@media (max-width: 991px){
    .bs-calltoaction > .row{
        display:block;
        width: auto;
    }

        .bs-calltoaction > .row > [class^="col-"],
        .bs-calltoaction > .row > [class*=" col-"]{
            float:none;
            display:block;
            vertical-align:middle;
            position: relative;
        }

        .cta-contents{
            text-align: center;
        }
}


.bs-calltoaction.bs-calltoaction-info{
  color: #fff;
  background-color: #5bc0de;
  border-color: #46b8da;
}


.bs-calltoaction.bs-calltoaction-info .cta-button .btn {
  border-color:#fff;
}

.abc {
  position: relative;
}
.def {
  position: absolute;
  top: 10px;
  right: 20px;
  max-width: 300px;
}

@media screen and (max-width: 480px) {
  .def {
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      max-width: 480px;
      width: 95%;
      height: 85%;
  }
.panel.panel-default .panel-heading { 
  padding: 5px 15px;
}
.panel.panel-default .panel-body {
  padding: 5px;
}


}

/* Grid css */
    p.bottom-column-color {
      font-size: 0.82em;
      color: green;
    }
    
    .index-content a:hover {
      color: black;
      text-decoration: none;
    }
    .index-content .row {
      margin-top: 20px;
    }
    .index-content a {
      color: black;
    }
    .index-content .card {
      background-color: #FFFFFF;
      padding: 0;
      -webkit-border-radius: 4px;
      -moz-border-radius: 4px;
      border-radius: 4px;
      box-shadow: 0 4px 5px 0 rgba(0, 0, 0, 0.14), 0 1px 10px 0 rgba(0, 0, 0, 0.12), 0 2px 4px -1px rgba(0, 0, 0, 0.3);
    }
    .index-content .card:hover {
      box-shadow: 0 16px 24px 2px rgba(0, 0, 0, 0.14), 0 6px 30px 5px rgba(0, 0, 0, 0.12), 0 8px 10px -5px rgba(0, 0, 0, 0.3);
      color: black;
    }
    .index-content .card img {
      width: 100%;
      border-top-left-radius: 4px;
      border-top-right-radius: 4px;
    }
    .index-content .card h4 {
      margin: 20px;
    }
    .index-content .card p {
      margin: 20px;
      opacity: 0.65;
    }
    .index-content .cta {
      width: 235px;
      -webkit-transition: background-color 1s, color 1s;
      /* For Safari 3.1 to 6.0 */
      transition: background-color 0.5s, color 0.5s;
      min-height: 20px;
      background-color: #4CAF50;
      color: #ffffff;
      border-radius: 4px;
      text-align: center;
      font-weight: lighter;
      margin: 0px 20px 15px 20px;
      padding: 5px 0px;
      display: inline-block;
    }
    .index-content .cta:hover {
      background-color: #dadada;
      color: #002E5B;
    }
    /* Set width between block elements */
    .small-padding.top {
       padding-top:10px;
    }

    .small-padding.bottom {
        padding-bottom:10px;
    } 
    .small-padding.left {
        padding-left:5px;
    }

    .small-padding.right {
        padding-right:5px;
    }

    .row [class*="col-"] {
      padding-left: 5px;
      padding-right: 5px;
    }

    .margin_bottom {
      margin-bottom: 10px;
    }
    .row [class*="col-"] {
      padding-right: 5px;
      padding-left: 5px;
    }
    .row {
      margin-left: -5px;
      margin-right: -5px;
    }
    .card-img-bottom {
      color: #fff;
      height: 20rem;
      background: url(images/img1.jpg) center no-repeat;
      background-size: cover;
    }
    .img-responsive { 
        height: 100%;
    }
    
    /* Set full width on columns */
    @media (max-width: 768px) {
        .img-responsive {
        width: 100%;
        }
        .index-content .card img {
        height: 100%
      }
    }

    @media (max-width: 991px) {
      h3 {
        font-size: 1.2em;

      }
    }

    /* GRID ELEMENTS MEDIA QUERIES */
    @media (min-width: 768px) {
      .card {
        position: relative;
      }
      .card-content {
        position: absolute;
        bottom: 0;
        width: 100%;
        background: rgba(0, 0, 0, 0.5);
      }
      .card-content h4,
      .card-content p {
        color: white;
        width: 100%;
        float: left;
        margin: 0 0 5px;
      }
      .card-content a {
        float: right;
      }
      .index-content .card h4,
      .index-content .card p {
        padding: 15px 20px;
        margin: 0;
      }
      .index-content .card p {
        padding: 0 20px 15px;
        margin: 0;
      }
      .card-content-textbox {
        position: absolute;
        top: 0;
        left: 0;
        background: rgba(255, 255, 255, 0.7);
        /*right: 0;*//* top position on right*/
        margin: 15px;
        max-width: 300px;
        height: 91%
      }
    }
    .bottom-left {
        position: static;
        margin-left: 15px;
        margin-bottom: 15px;
        bottom: 8px;
        left: 16px;
    }
    @media (max-width: 993px) {
      .def {
         position: relative;
         top: auto; 
         right: auto; 
      }
    }
    @media (max-width: 480px){
     .def {
        position: relative;
        top: 170px;
        right: auto;
      }
    }
    
     
    <!DOCTYPE html>
<html lang="en">
<head>
  <title>Kontakt Test</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

  <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.1.0/css/all.css" integrity="sha384-lKuwvrZot6UHsBSfcMvOkWwlCMgc0TaWr+30HWe3a4ltaBwTZhyTEggF5tJv8tbt" crossorigin="anonymous">
  <!-- TrustBox script -->
  <script type="text/javascript" src="//widget.trustpilot.com/bootstrap/v5/tp.widget.bootstrap.min.js" async></script>
  <!-- End Trustbox script -->
</head>
<body>

<div class="container">
    <div class="row">
        <div class="col-xs-12 col-sm-3 small-padding right bottom">
            <div class="index-content">
                <div class="card">
                    <img src="http://www.hdnicewallpapers.com/Walls/Thumb/Other%20Animals/Zebra_Animal_HD_Wallpaper.jpg"></img>
                    <div>
                        <h4>Headline 1</h4>
                        <p class="bottom-column-color">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam</p>

                        <p class="bottom-column-color">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam</p>

                        <p class="bottom-column-color">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam</p>

                        <p class="bottom-column-color">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam</p>
                        <button type="button" class="btn btn-success bottom-left">See offer here</button>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-xs-12 col-sm-3 small-padding right bottom">
            <div class="index-content">
                <div class="card">
                    <img src="http://www.hdnicewallpapers.com/Walls/Thumb/Other%20Animals/Zebra_Animal_HD_Wallpaper.jpg"></img>
                    <div >
                        <h4>Headline 2</h4>
                        <p class="bottom-column-color">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut</p>

                        <p class="bottom-column-color">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor</p>

                        <p class="bottom-column-color">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam</p>

                        <p class="bottom-column-color">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam</p>
                        <button type="button" class="btn btn-success bottom-left">Read more</button>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-xs-12 col-sm-3 small-padding right bottom">
            <div class="index-content">
                <div class="card">
                    <img src="http://www.hdnicewallpapers.com/Walls/Thumb/Other%20Animals/Zebra_Animal_HD_Wallpaper.jpg"></img>
                    <div >
                        <h4>Headline 3</h4>
                        <p class="bottom-column-color">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor</p>

                        <p class="bottom-column-color">Labore et dolore magna aliqua. Ut enim ad minim veniam. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor</p>

                        <p class="bottom-column-color">Dolore magna aliqua. Ut enim ad minim veniam. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor. Consectetur adipiscing elit, sed do eiusmod tempor</p>
                        <button type="button" class="btn btn-success bottom-left">Read more</button>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-xs-12 col-sm-3 small-padding right bottom">
            <div class="index-content">
                <div class="card">
                    <img src="http://www.hdnicewallpapers.com/Walls/Thumb/Other%20Animals/Zebra_Animal_HD_Wallpaper.jpg"></img>
                    <div >
                        <h4>Headline 4</h4>
                        <p class="bottom-column-color">Ut enim ad minim veniam. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor</p>

                        <p class="bottom-column-color">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor</p>
                        
                        <p class="bottom-column-color">incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</p>
                        <button type="button" class="btn btn-success bottom-left">Read more</button>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
    
    
    
   
    
  
    
 


                        
    
                    
    
                
    

            
    

            
    
            
    
    
    
        
        
        
        
    
    

    
        
    


        
    
        
    

        
    
    
    
        1 回复  |  直到 7 年前
    
    

    
        
    

            
    
                
                
    

                    
                        
                    

                    

                    
                        
         1
    
                        
    

                        
    
                            
    
                                
  •   1
                            
    
                            
    
                                
  • 
                            
    
                        
    
                         
                        ReSedano 
                         
                        7 年前


                        
    
                        
    
 
 
 
  
    
   
   
  
    
  
    
  
    
  
    
  
    
  
    
  
    
  
    
   
    
    
    .row-eq-height [class*="col-"] {
  padding-left: 5px;
  padding-right: 5px;
}

.card {
 
  box-shadow: 0 4px 5px 0 rgba(0, 0, 0, 0.14), 
              0 1px 10px 0 rgba(0, 0, 0, 0.12), 
              0 2px 4px -1px rgba(0, 0, 0, 0.3);
  border-radius: 4px;
}

.card{
  margin-bottom: 20px;
}

.card:hover {
  box-shadow: 0 16px 24px 2px rgba(0, 0, 0, 0.14), 
              0 6px 30px 5px rgba(0, 0, 0, 0.12), 
              0 8px 10px -5px rgba(0, 0, 0, 0.3);
  cursor: pointer;
}

.card .card-title,
.card .card-body,
.card .card-btn {
  padding: 0 15px;
}

.card .card-btn{
  margin-top: auto;
  padding-bottom: 15px;
}

.card-body p {
  font-size: 0.82em;
  color: green;
}

.card-img-top{
  border-top-left-radius: 4px;
  border-top-right-radius: 4px;
  width: 100%;
  min-height: 1px; /* trick for IE11 */
}

@media (min-width: 768px) {
  .row-eq-height{
    display: flex;
  }

  .row-eq-height [class*="col-"] {
    display: flex;
    flex: 1;
  }

  .card{
    display: flex;
    flex-direction: column;
    flex: 1;
  }
}
    
    
      <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

  <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.1.0/css/all.css" integrity="sha384-lKuwvrZot6UHsBSfcMvOkWwlCMgc0TaWr+30HWe3a4ltaBwTZhyTEggF5tJv8tbt" crossorigin="anonymous">
  <!-- TrustBox script -->
  <script type="text/javascript" src="//widget.trustpilot.com/bootstrap/v5/tp.widget.bootstrap.min.js" async></script>

<div class="container">
    <div class="row row-eq-height">
        <div class="col-xs-12 col-sm-3">
            <div class="card">
                <img class="card-img-top" src="https://picsum.photos/300/200" >
                <h4 class="card-title">Headline 1</h4>
                <div class="card-body">
                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam</p>

                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam</p>

                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam</p>

                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam</p>
                </div>
                <div class="card-btn">
                    <button type="button" class="btn btn-success">See offer here</button>
                </div>
            </div>
        </div>
        <div class="col-xs-12 col-sm-3">

            <div class="card">
                <img class="card-img-top" src="https://picsum.photos/300/200" >
                <h4 class="card-title">Headline 2</h4>

                <div class="card-body">
                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut</p>

                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor</p>

                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam</p>

                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam</p>
                </div>
                <div class="card-btn">
                    <button type="button" class="btn btn-success">See offer here</button>
                </div>
            </div>

        </div>
        <div class="col-xs-12 col-sm-3">

            <div class="card">
                <img class="card-img-top" src="https://picsum.photos/300/200" >
                <h4 class="card-title">Headline 3</h4>
                <div class="card-body">
                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor</p>

                    <p>Labore et dolore magna aliqua. Ut enim ad minim veniam. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor</p>

                    <p>Dolore magna aliqua. Ut enim ad minim veniam. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor. Consectetur adipiscing elit, sed do eiusmod tempor</p>
                </div>
                <div class="card-btn">
                    <button type="button" class="btn btn-success">See offer here</button>
                </div>
            </div>

        </div>
        <div class="col-xs-12 col-sm-3">
   
            <div class="card">
                <img class="card-img-top" src="https://picsum.photos/300/200" >
                <h4 class="card-title">Headline 4</h4>
                <div class="card-body">
                    <p>Ut enim ad minim veniam. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor</p>

                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor</p>
                    
                    <p>incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</p>
                </div>
                <div class="card-btn">
                    <button type="button" class="btn btn-success">See offer here</button>
                </div>
            </div>

        </div>
    </div>
</div>
    
   
    
  
    
 

    
                        		
                
    
                    
            
    
        
    
    


    

        
    

        
    
    
    
        
        
        
        
    
    

    

        
    
        
    

    
    
        推荐文章
    
    

    

        
    

            
    
                
                
    

                    
                        
                    
                    
                    
                        
                            code-geek
                             · 
                            Jquery根据单选按钮选择隐藏或显示文本字段
                        
                        
    
                        1 年前
                        		
                
    
                    
            
    
        
    

    

        
    

            
    
                
                
    

                    
                        
                    
                    
                    
                        
                            Jamie
                             · 
                            在CSS链接的文件名中添加Jinja占位符
                        
                        
    
                        1 年前
                        		
                
    
                    
            
    
        
    

    

        
    

            
    
                
                
    

                    
                        
                    
                    
                    
                        
                            ptownbro
                             · 
                            重叠分区标签,同时保持以下所有分区和内容就位
                        
                        
    
                        1 年前
                        		
                
    
                    
            
    
        
    

    

        
    

            
    
                
                
    

                    
                        
                    
                    
                    
                        
                            Luke Frost IEng MIMechE
                             · 
                            Bootstrap 5.3在Div中的项目位置没有如我所期望的那样显示
                        
                        
    
                        1 年前
                        		
                
    
                    
            
    
        
    

    

        
    

            
    
                
                
    

                    
                        
                    
                    
                    
                        
                            Reegan
                             · 
                            使用Angular ngFor指令在html中渲染嵌套对象值
                        
                        
    
                        1 年前
                        		
                
    
                    
            
    
        
    

    

        
    

            
    
                
                
    

                    
                        
                    
                    
                    
                        
                            wqyutv
                             · 
                            当找不到文件时,任何破坏错误的东西都不会出现,我该怎么解决这个问题?
                        
                        
    
                        1 年前
                        		
                
    
                    
            
    
        
    

    

        
    

            
    
                
                
    

                    
                        
                    
                    
                    
                        
                            user29519291
                             · 
                            为不同的变量创建一个带有可重用Click函数的简单菜单
                        
                        
    
                        1 年前
                        		
                
    
                    
            
    
        
    

    

        
    

            
    
                
                
    

                    
                        
                    
                    
                    
                        
                            Gukkey
                             · 
                            在React中明确隐藏日期类型输入后,如果我单击父div,如何显示日期选择器?
                        
                        
    
                        1 年前
                        		
                
    
                    
            
    
        
    

    

        
    

            
    
                
                
    

                    
                        
                    
                    
                    
                        
                            Lorenzo Bertolaccini
                             · 
                            在Angular项目中通过对话框后,在控制台中显示但在HTML中不显示的数据数组
                        
                        
    
                        1 年前
                        		
                
    
                    
            
    
        
    

    

        
    

            
    
                
                
    

                    
                        
                    
                    
                    
                        
                            john Rizzo
                             · 
                            按钮背景颜色、悬停和活动状态存在问题
                        
                        
    
                        1 年前
                        		
                
    
                    
            
    
        
    

    


    

        
    
        
    
    
    
        
        
        
        
    
    

    

        
    
        
    
    
    
        
        
        
        
    
    

    

    
    



    
    

    
    
    
    

    


    
    
    
    
        
    
            
    

            
    
            
    

            
                关于
                 
                移动版

            

            
    
            代码之家 - 一站式码农服务社区

            
    
            
                沪ICP备11025650号