在Bootstrap

时间:2018-12-27 17:03:55

标签: html css twitter-bootstrap twitter-bootstrap-3 grid

我正在构建一个复杂的表,并且在响应性方面存在一些问题,并且能够根据特定行中的内容量将一行中的所有列对齐以具有相同的高度。

enter image description here

由于移动响应能力尚未完成,请在整页(1100px +)中运行代码

这是JSFiddle:http://jsfiddle.net/fLr9th4y/2/-请参考表中的#11以查看示例

代码如下:

.heading {
    background-color: #00C6D7;
}
.sub-heading {
    background-color: white;
    border-bottom: 1px solid lightgray;
}
h4, h6 {
    margin-bottom: 0px;
}
.container {
    box-shadow: 0 1px 3px rgba(77,72,69,0.2), 0 6px 10px rgba(77,72,69,0.15);
}
.row > .col-md-12 > span {
    font-size: smaller;
}
.col-md-4 > .row {
    padding-top: .6rem!important;
    padding-bottom: .6rem!important;
    height: 60px;
}
.col-md-3 > .row {
    padding-top: .6rem!important;
    padding-bottom: .6rem!important;
    height: 60px;
}
.col-md-2 {
    display: flex;
    justify-content: center;
    align-items: center;
}
.col-md-9 {
    padding: 0px!important;
}
.bl {
    border-left: 1px solid lightgray;
}
.bb {
    border-bottom: 1px solid #00C6D7;
}
.bg-white {
    background-color: white;
}
.mainText {
    font-style: italic;
    color: #00C6D7;
}
.bg-fhdark {
    background-color: #5E6A71;
}
.title {
    color: #A2AD00;
}
.blank {
    background: transparent!important;
}

.slick-prev, .slick-next {
    background: black!important;
}
.r1 {
    color: black;
}

/* BootStrap 4 Classes */
.py-5 {
    padding-bottom: 3rem!important;
    padding-top: 3rem!important;
}
.py-2 {
    padding-bottom: .5rem!important;
    padding-top: .5rem!important;
}
.text-white {
    color: #fff!important;
}
.text-left {
    text-align: left!important;
}
.text-uppercase {
    text-transform: uppercase!important;
}
.font-weight-bold {
    font-weight: 700!important;
}
.small {
    font-size: 80%;
    font-weight: 400;
}
.row {
    display: flex;
    flex-wrap: wrap;
}
.row-11 {
    height: auto!important;
}
/* ----- */
<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" type="text/css">
  <!-- <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css"> -->
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">

  <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick.css"/>
  <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick-theme.css"/>
</head>

<body>
<div class="py-5">
    <div class="container">
        <div class="row">
            <div class="col-md-10 text-white text-left py-2 heading">
                <h4 class="text-uppercase font-weight-bold">Core Competencies</h4>
                <span class="small">Our goal was to develop a set of core competencies that are consistent across the agency amd reflect growth as a priority.
                </span>
            </div>
            <div class="col-md-2 col-md-2 text-center py-2 heading">
                <img src="" />
            </div>
        </div>
        <div class="row">
            <div class="col-md-12">
                <div class="row">
                    <div class="col-md-3">
                        <div class="row r1">
                            <div class="col-md-12">
                                <span>Test</span>
                            </div>
                        </div>
                        <div class="row py-1 bg-fhdark">
                            <div class="col-md-12 text-left text-uppercase font-weight-bold text-white">
                                <span>Client</span>
                            </div>
                        </div>
                        <div class="row bb">
                            <div class="col-md-12">
                                <span>Client Focus, Strategic Counsel and Consultancy</span>
                            </div>
                        </div>
                        <div class="row bb">
                            <div class="col-md-12">
                                <span>Integrated Strategy and Account Management</span>
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-md-12">
                                <span>Creativity and Innovation</span>
                            </div>
                        </div>
                        <div class="row py-1 bg-fhdark">
                            <div class="col-md-12 text-left text-uppercase font-weight-bold text-white">
                                <span>Talent</span>
                            </div>
                        </div>
                        <div class="row bb">
                            <div class="col-md-12">
                                <span>Manage Full Talent LifeCycle</span>
                            </div>
                        </div>
                        <div class="row bb">
                            <div class="col-md-12">
                                <span>Professional Development/Developing and Empowering</span>
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-md-12">
                                <span>Self-Leadership</span>
                            </div>
                        </div>
                        <div class="row py-1 bg-fhdark">
                            <div class="col-md-12 text-left text-uppercase font-weight-bold text-white">
                                <span>Business Development and Growth</span>
                            </div>
                        </div>
                        <div class="row bb">
                            <div class="col-md-12">
                                <span>New Business Strategy</span>
                            </div>
                        </div>
                        <div class="row bb">
                            <div class="col-md-12">
                                <span>Prospecting</span>
                            </div>
                        </div>
                        <div class="row bb">
                            <div class="col-md-12">
                                <span>New Business Pitch Preparation, Participation and Leadership</span>
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-md-12">
                                <span>Organic Growth</span>
                            </div>
                        </div>
                        <div class="row py-1 bg-fhdark">
                            <div class="col-md-12 text-left text-uppercase font-weight-bold text-white">
                                <span>Finance and Operations</span>
                            </div>
                        </div>
                        <div class="row bb row-11">
                            <div class="col-md-12">
                                <span>Financial Management of Accounts (Account Profitability, Realization, Budgets) TEST TEST TEST TEST TEST TEST TEST</span>
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-md-12">
                                <span>Staffing and Resource Planning</span>
                            </div>
                        </div>
                    </div>


                    <div class="col-md-9">
                        <section class="regular slider">
                            <div class="col-md-4 bl">
                                <div class="row r1">
                                    <div class="col-md-12">
                                        <h6 class="text-uppercase font-weight-bold title">Junior</h6>
                                        <span>Valued Colleague and Practitioner</span>
                                    </div>
                                </div>
                                <div class="row bg-fhdark">
                                    <div class="col-md-12">
                                        <div class="col-md-12 text-left text-uppercase font-weight-bold text-white">
                                            
                                        </div>
                                    </div>
                                </div>
                                <div class="row bb">
                                    <div class="col-md-12">
                                        <span>1</span>
                                    </div>
                                </div>
                                <div class="row bb">
                                    <div class="col-md-12">
                                        <span>2</span>
                                    </div>
                                </div>
                                <div class="row">
                                    <div class="col-md-12">
                                        <span>3</span>
                                    </div>
                                </div>
                                <div class="row bg-fhdark">
                                    <div class="col-md-12">
                                        <div class="col-md-12 text-left text-uppercase font-weight-bold text-white">
                                            
                                        </div>
                                    </div>
                                </div>
                                <div class="row bb">
                                    <div class="col-md-12">
                                        <span>4</span>
                                    </div>
                                </div>
                                <div class="row bb">
                                    <div class="col-md-12">
                                        <span>5</span>
                                    </div>
                                </div>
                                <div class="row">
                                    <div class="col-md-12">
                                        <span>6</span>
                                    </div>
                                </div>
                                <div class="row bg-fhdark">
                                    <div class="col-md-12">
                                        <div class="col-md-12 text-left text-uppercase font-weight-bold text-white">
                                            
                                        </div>
                                    </div>
                                </div>
                                <div class="row bb">
                                    <div class="col-md-12">
                                        <span>7</span>
                                    </div>
                                </div>
                                <div class="row bb">
                                    <div class="col-md-12">
                                        <span>8</span>
                                    </div>
                                </div>
                                <div class="row bb">
                                    <div class="col-md-12">
                                        <span>9</span>
                                    </div>
                                </div>
                                <div class="row">
                                    <div class="col-md-12">
                                        <span>10</span>
                                    </div>
                                </div>
                                <div class="row bg-fhdark">
                                    <div class="col-md-12">
                                        <div class="col-md-12 text-left text-uppercase font-weight-bold text-white">
                                            
                                        </div>
                                    </div>
                                </div>
                                <div class="row bb row-11">
                                    <div class="col-md-12">
                                        <span>11</span>
                                    </div>
                                </div>
                                <div class="row">
                                    <div class="col-md-12">
                                        <span>12</span>
                                    </div>
                                </div>
                            
                            
                            
                            
                            </div>




                            <div class="col-md-4 bl">
                                <div class="row r1">
                                    <div class="col-md-12">
                                        <h6 class="text-uppercase font-weight-bold title">Mid</h6>
                                        <span>Trusted Colleague; Proven and Creative Practitioner</span>
                                    </div>
                                </div>
                                <div class="row bg-fhdark">
                                    <div class="col-md-12">
                                        <div class="col-md-12 text-left text-uppercase font-weight-bold text-white">
                                            
                                        </div>
                                    </div>
                                </div>
                                <div class="row bb">
                                    <div class="col-md-12">
                                        <span>1</span>
                                    </div>
                                </div>
                                <div class="row bb">
                                    <div class="col-md-12">
                                        <span>2</span>
                                    </div>
                                </div>
                                <div class="row">
                                    <div class="col-md-12">
                                        <span>3</span>
                                    </div>
                                </div>
                                <div class="row bg-fhdark">
                                    <div class="col-md-12">
                                        <div class="col-md-12 text-left text-uppercase font-weight-bold text-white">
                                            
                                        </div>
                                    </div>
                                </div>
                                <div class="row bb">
                                    <div class="col-md-12">
                                        <span>4</span>
                                    </div>
                                </div>
                                <div class="row bb">
                                    <div class="col-md-12">
                                        <span>5</span>
                                    </div>
                                </div>
                                <div class="row">
                                    <div class="col-md-12">
                                        <span>6</span>
                                    </div>
                                </div>
                                <div class="row bg-fhdark">
                                    <div class="col-md-12">
                                        <div class="col-md-12 text-left text-uppercase font-weight-bold text-white">
                                            
                                        </div>
                                    </div>
                                </div>
                                <div class="row bb">
                                    <div class="col-md-12">
                                        <span>7</span>
                                    </div>
                                </div>
                                <div class="row bb">
                                    <div class="col-md-12">
                                        <span>8</span>
                                    </div>
                                </div>
                                <div class="row bb">
                                    <div class="col-md-12">
                                        <span>9</span>
                                    </div>
                                </div>
                                <div class="row">
                                    <div class="col-md-12">
                                        <span>10</span>
                                    </div>
                                </div>
                                <div class="row bg-fhdark">
                                    <div class="col-md-12">
                                        <div class="col-md-12 text-left text-uppercase font-weight-bold text-white">
                                            
                                        </div>
                                    </div>
                                </div>
                                <div class="row bb row-11">
                                    <div class="col-md-12">
                                        <span>11</span>
                                    </div>
                                </div>
                                <div class="row">
                                    <div class="col-md-12">
                                        <span>12</span>
                                    </div>
                                </div>


                            </div>
                            <div class="col-md-4 bl">
                                <div class="row r1">
                                    <div class="col-md-12">
                                        <h6 class="text-uppercase font-weight-bold title">Senior</h6>
                                        <span>Trusted Client Advisor and Partner; Proven Agency Leader</span>
                                    </div>
                                </div>
                                <div class="row bg-fhdark">
                                    <div class="col-md-12">
                                        <div class="col-md-12 text-left text-uppercase font-weight-bold text-white">
                                            
                                        </div>
                                    </div>
                                </div>
                                <div class="row bb">
                                    <div class="col-md-12">
                                        <span>1</span>
                                    </div>
                                </div>
                                <div class="row bb">
                                    <div class="col-md-12">
                                        <span>2</span>
                                    </div>
                                </div>
                                <div class="row">
                                    <div class="col-md-12">
                                        <span>3</span>
                                    </div>
                                </div>
                                <div class="row bg-fhdark">
                                    <div class="col-md-12">
                                        <div class="col-md-12 text-left text-uppercase font-weight-bold text-white">
                                            
                                        </div>
                                    </div>
                                </div>
                                <div class="row bb">
                                    <div class="col-md-12">
                                        <span>4</span>
                                    </div>
                                </div>
                                <div class="row bb">
                                    <div class="col-md-12">
                                        <span>5</span>
                                    </div>
                                </div>
                                <div class="row">
                                    <div class="col-md-12">
                                        <span>6</span>
                                    </div>
                                </div>
                                <div class="row bg-fhdark">
                                    <div class="col-md-12">
                                        <div class="col-md-12 text-left text-uppercase font-weight-bold text-white">
                                            
                                        </div>
                                    </div>
                                </div>
                                <div class="row bb">
                                    <div class="col-md-12">
                                        <span>7</span>
                                    </div>
                                </div>
                                <div class="row bb">
                                    <div class="col-md-12">
                                        <span>8</span>
                                    </div>
                                </div>
                                <div class="row bb">
                                    <div class="col-md-12">
                                        <span>9</span>
                                    </div>
                                </div>
                                <div class="row">
                                    <div class="col-md-12">
                                        <span>10</span>
                                    </div>
                                </div>
                                <div class="row bg-fhdark">
                                    <div class="col-md-12">
                                        <div class="col-md-12 text-left text-uppercase font-weight-bold text-white">
                                            
                                        </div>
                                    </div>
                                </div>
                                <div class="row bb row-11">
                                    <div class="col-md-12">
                                        <span>11</span>
                                    </div>
                                </div>
                                <div class="row">
                                    <div class="col-md-12">
                                        <span>12</span>
                                    </div>
                                </div>


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









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

<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>

<script type="text/javascript" src="https://code.jquery.com/jquery-1.11.0.min.js"></script>
<script type="text/javascript" src="https://code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick.min.js"></script>

<script type="text/javascript">
    $(function() {
        $(".regular").slick({
        dots: false,
        infinite: false,
        slidesToShow: 2,
        slidesToScroll: 1,
    });
});
</script>
</body>
</html>

2 个答案:

答案 0 :(得分:1)

我相信您的做法是错误的。您应该基于行而不是列来重构HTML结构,这将使响应更加容易。您应该自定义滑动功能以使其正常运行,而不是与CSS一起使用

.heading {
    background-color: #00C6D7;
}
.sub-heading {
    background-color: white;
    border-bottom: 1px solid lightgray;
}
h4, h6 {
    margin-bottom: 0px;
}
.container {
    box-shadow: 0 1px 3px rgba(77,72,69,0.2), 0 6px 10px rgba(77,72,69,0.15);
}
.row > .col-md-12 > span {
    font-size: smaller;
}
.col-md-4 > .row {
    padding-top: .6rem!important;
    padding-bottom: .6rem!important;
    height: 60px;
}
.col-md-3 > .row {
    padding-top: .6rem!important;
    padding-bottom: .6rem!important;
    height: 60px;
}
.col-md-2 {
    display: flex;
    justify-content: center;
    align-items: center;
}
.col-md-9 {
    padding: 0px!important;
}
.bl {
    border-left: 1px solid lightgray;
}
.bb {
    border-bottom: 1px solid #00C6D7;
}
.bg-white {
    background-color: white;
}
.mainText {
    font-style: italic;
    color: #00C6D7;
}
.bg-fhdark {
    background-color: #5E6A71;
}
.title {
    color: #A2AD00;
}
.blank {
    background: transparent!important;
}

.slick-prev, .slick-next {
    background: black!important;
}
.r1 {
    color: black;
}

/* BootStrap 4 Classes */
.py-5 {
    padding-bottom: 3rem!important;
    padding-top: 3rem!important;
}
.py-2 {
    padding-bottom: .5rem!important;
    padding-top: .5rem!important;
}
.text-white {
    color: #fff!important;
}
.text-left {
    text-align: left!important;
}
.text-uppercase {
    text-transform: uppercase!important;
}
.font-weight-bold {
    font-weight: 700!important;
}
.small {
    font-size: 80%;
    font-weight: 400;
}
.row {
    display: flex;
    flex-wrap: wrap;
}
.row-11 {
    height: auto!important;
}
/* ----- */
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS" crossorigin="anonymous">

<div class="row bg-fhdark">
    <div class="col-sm-4 text-left text-uppercase font-weight-bold text-white">
        <span>Finance and Operations</span>
    </div>
    <div class="col-sm-4"></div>
    <div class="col-sm-4"></div>
</div>
<div class="row bb">
    <div class="col-sm-4">
        <span>Financial Management of Accounts (Account Profitability, Realization, Budgets) TEST TEST TEST TEST TEST
            TEST TEST</span>
    </div>
    <div class="col-sm-4 bl">11</div>
    <div class="col-sm-4 bl">12</div>
</div>
<div class="row bb">
    <div class="col-sm-4">
        <span>Staffing and Resource Planning</span>
    </div>
    <div class="col-sm-4 bl">12</div>
    <div class="col-sm-4 bl">12</div>
</div>

答案 1 :(得分:0)

只需重新构建您的html。您拥有row并且内部有列(如果我看对的话,每个列都是col-md-3,但这并不是那么重要)。您也可以使用css-grid:https://css-tricks.com/snippets/css/complete-guide-grid/