html - 将 Bootstrap 3 按钮设置为在卡片中具有相同的位置

标签 html css twitter-bootstrap

我正在尝试将 Bootstrap 3 按钮对齐到水平线上，如下图所示。这是我的 demosite until now .我可以通过设置边距来对齐按钮，但是在所有视口(viewport)上看起来都不错似乎是个难题。

有没有一种巧妙的方法来对齐按钮？

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>

最佳答案

我试着让它更简单，所以我改变了你的 html。一个可能的解决方案是使用 flexbox :)

看看。

干杯

.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>

关于html - 将 Bootstrap 3 按钮设置为在卡片中具有相同的位置，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/51609077/

上一篇：css - 将主要内容包装在可滚动的 div 中时看不到滚动条的末尾

下一篇：html - 需要帮助找到在数据表中应用 css 样式的正确位置

相关文章：

javascript - 使用cherrypy和JavaScript的HTML进度条

javascript - 正确实现弹出式联系表格

html - CSS 背景图像

javascript - HTML 表单 onsubmit 转到 html 片段

php - Xpath - 选择具有属性的元素并获取另一个属性值

forms - Twitter bootstrap 将水平表单与内联混合

jquery - 在 Grails 中使用 Twitter bootstrap，看起来不一样

html - 当屏幕尺寸缩小时，可折叠导航栏按钮不显示菜单

python - 未关闭的标签 'block' 。寻找 : endblock 之一

html - 如何在CSS中设置页眉和页脚？

©2024 IT工具网  联系我们