好吧,我知道我只是犯了一个初犯的错误,但我似乎想不出来。我本来打算用jumbotron类,但发现文本更改不是我想要的。我需要创建一个100%宽度的容器流体与一行和一列第1列将包含一个图像50%的屏幕。另一半需要垂直和水平居中于图像。另一个问题是它需要与它下面的标题排成一行。这是我的代码,我会尝试为任何试图帮助我的人做一个引导。
好的,我不知道我会把这个图像保存多久,但这里有一个屏幕截图,上面的红色矩形是问题所在,或者模块需要在哪里:https://www.chrobinson.com/en-us/-/media/177FC7F22DA6496AB26BAA75C230BE41.ash
启动:http://www.bootply.com/i5cb1GIdxk

    <style>
    /* LESS Document */

/*********  TMC QUERIES  *********/
@tmcGreen:#c0c920;
@tmcLightblue:#4fb4e1;
@tmcDarkblue:#003a63;
@tmcOrange:#c05d1a;
@tmcDarkgrey:#939598;
@tmcLightgrey:#c7c8ca;

/************ CUSTOM FONTS **************/


/************* BASIC STYLES **************/
a {
    color:@tmcLightblue;
    text-decoration:none;
    }
a:hover {
    text-decoration:none;
    }
p {
    margin: 10px 0;
    }
body{
    font-family:"Lato";
    }
html,body {
    height:100%;
    }

/*********  NAV STYLES  *********/
.dividerNav{
    height:4px;
    background-color:#fff;
    }
.navbar.navbar-default > .container{
    border-bottom:1px solid @tmcDarkblue
    }
.menu-toggle-text{
    color:#4fb4e1;
    }
.navbar-toggle{
    border:none;
    padding:9px 1px;
    }
.navbar-toggle:hover .navbar-toggle:focus{
    background-color:none;
    }
.hover-dropdown{
    background-color:transparent;
    }
.hover-dropdown ul{
    border: medium none;
    border-radius:0px;
    background-color: rgba(0,58,99,0.80);
    padding: 25px 0;
    }
.navbar .hover-dropdown li a{
    color:#fff;
    margin: 0 18px;
    }
.header-list{
    margin-bottom:4px;
    margin-top:15px;
    }
.navbar-brand{
    text-indent:-999px;
    max-width:234px;
    width:100%;
    height:auto;
    }
.nav > li {
    display: block;
    position: static;
    margin: 0 25px 0 0;
    }
.subscribe-input, .form-control:focus{
    box-shadow:none;
    border-color:@tmcDarkblue;
    }
.navbar .navbar-nav {
    display: inline-block;
    float: none;
    vertical-align: top;
    }
.navbar {
    text-align: center;
    margin-bottom:8px;
    border-bottom:none;
    border-top:0px;
    border-radius:0px;
    border-left:0px;
    border-right:0px;
    border-top:0px;
    }
.modeSelector{
    right:57px;
    }
.dropdown a{
    text-decoration:none;
    }
.navbar .hover-dropdown li a:hover {
    text-decoration:none;
    color:@tmcLightblue;
    }
.dropdown-menu{
    width:100%;
    text-align:center;
    box-shadow:none;
    border:none;
    border-radius:0;
    }
.modes{
    border:1px solid @tmcDarkblue;
    border-radius:0px;
    text-align:left;
    }
.modes li a{
    color:@tmcDarkblue;
    }
.modes li a:hover{
    color:@tmcLightblue;
    }
.user-input, .pass-input{
    width:41.5%;
    float:left;
    }
.search-input{
    width:82%;
    }
.subscribe-input, .form-control{
    border-radius:0px;
    border-color:@tmcDarkblue;
    color:@tmcDarkgrey;
    float:left;
    margin-right:4px;
    }
.glyphicon-arrow-right{
    color:#c05d1a;
    }
.glyphicon-search{
    color:#c05d1a;
    }
.logo, .search-wrapper {
    padding-top:39px
    }
/*********  HEADER STYLES  *********/
.hero-image{
    margin-bottom:50px;
    }
.headlineHero a, .headlineHero a:hover{
    color:#fff;
    }
.heroWrapper{
    position:relative;
    margin:0 0 50px;
    }
.heroText{
    position: absolute;
    top: 35%;
    width: 100%;
    }
.heroContainer{
    margin: 0px auto;
    }
.intro-text{
    margin:0 auto;
    background-color: rgba(106,69,52,0.32);
    border: 2px solid #fff;
    color:#fff;
    text-align:center;
    }
.intro-text h2 {
    font-size:x-large;
    margin: 15px 0 5px;
    }
.headlineHero{
    font-family:"lato";
    font-weight:bold;
    }
.intro-text h3 {
    font-size:medium;
    margin: 8px 0 10px;
    }
.btn-default{
    border-color:#c05d1a;
    border-radius:0px;
    }
.btn-hero, .hero-btn:hover, .hero-btn:active, .hero-btn:focus{
    margin:0 auto;
    color:#fff !important;
    border:1px solid #fff !important;
    background-color:transparent !important;
    }
.vcenter {
    display: inline-block;
    vertical-align: middle;
    float: none;
    }
.glyphicon-hero{
    color:#fff !important;
    }
.image-responsive{
    display: block;
    height: auto;
    width: 100%;
    }
#navbar-collapse-2, #navbar-collapse-1{
    position: static;
    width: 100%;
    z-index: 2147483647;
    }
.nav > li.dropdown{
    /*border-bottom:2px solid #fff;*/
    }
.navbar-default .navbar-nav > .active > a, .navbar-default .navbar-nav > .active > a:hover, .navbar-default .navbar-nav > .active > a:focus{
    color:@tmcLightblue;
    background-color:none;
    background:none;
    border-bottom:2px solid @tmcDarkblue;
    }
.navbar-default .navbar-nav > .open > a, .navbar-default .navbar-nav > .open > a:hover, .navbar-default .navbar-nav > .open > a:focus {
    background-color: transparent;
    color:@tmcLightblue;
    }
.navbar-default .navbar-nav > li > a:hover, .navbar-default .navbar-nav > li > a:focus {
    background-color: transparent !important;
    color: @tmcLightblue;
    }
.navbar-nav > li > a{
    border-bottom:2px solid #fff;
    }
.btn-default:hover, .btn-default:focus, .btn-default.focus, .btn-default:active, .btn-default.active, .open > .dropdown-toggle.btn-default {
    background-color: #fff;
    border-color: @tmcOrange;
    color: #fff;
    }
.glyphicon .glyphicon-search:hover {
    color: #fff;
    }

/********* HEADLINES *********/
.headlineBorder{
    display:inline;
    text-transform:uppercase;
    border-bottom:3px solid @tmcGreen;
    }
.headlineBorderblue{
    display:inline;
    text-transform:uppercase;
    border-bottom:3px solid @tmcDarkblue;
    }
.headlineBorderwhite{
    display:inline;
    text-transform:uppercase;
    border-bottom:3px solid #fff;
    color:#fff;
    }

.btn-blue{
    border-color:@tmcLightblue;
    }
.btn-blue:hover, .btn-blue:active, .btn-blue:focus{
    background-color:@tmcDarkblue;
    border-color:#fff;
    }
.glyphicon-menu-right:hover{
    color:#fff !important;
    }
.headlineGlyph:hover{
    color:@tmcLightblue !important;
    }
.btn-mobile-right {
    border:none;
    }
.btn-mobile-right:hover, .btn-mobile-right:focus, .btn-mobile-right.focus, .btn-mobile-right:active, .btn-mobile-right.active, .open > .dropdown-toggle.btn-default {
    background-color: transparent;
    }
.glyphicon-menu-right, .glyphicon-menu-left{
    /*color:@tmcLightblue;*/
    }
.glyphicon-menu-right:hover, .glyphicon-menu-left:hover{
    color:#fff;
    }

.fourXfour{
    margin-bottom: 50px;
    }

/********* INSIDE PAGE HERO IMAGE ************/
.insideHero{padding:0;}
.insidePagehero{
    display: block;
    height: auto;
    width: 100%;
    }
.halfHero{
    padding:0;
    }
.insideHerocolorPicker{
    background:orange;
    }
.pageIntroheadline{
    display: inline-block;
    color:#fff;
    }
/*********  HOMEPAGE MARKETING AREA  *********/
.marketing-wrapper{
    width:100%;
    margin-top:50px;
    margin-bottom:50px;
    }
.mareting-section{
    padding:0;
    }
/************************* FLIPPING STYLES *******************/
.marketing-wrapper.container-fluid{
    padding:0;
    }
.marketing-wrapper h2{
    margin-bottom:20px;
    }
.flipperWrap{
    padding:0;
    }
      .card {
        width:100%;
        max-width: 750.666px;
        height: 611px;
        margin: 0px;
        display: inline-block;
        clear:both;
      }

      .front, .back {
        padding: 0px;
      }
      .front {
        background-color: transparent;
      }
      .back {
        background-color: transparent;
      }
      .card div{

          }
.blogInside, .tmsInside, .globalInside{
    margin:80px auto;
    height:50%;
    width:62%;
    }
.blogBack{
    background-color:@tmcOrange;
    color:#fff;
    padding: 0px;
    }
.blogIcon{
    background:url("../images/blogIcon.png") no-repeat scroll 0 0 rgba(0, 0, 0, 0);
    display: inline-block;
    height: 38px;
    width: 46px;
    float:left;
    margin:0 22px 0 0;
    }
.tmsBack{
    background-color:@tmcDarkblue;
    color:#fff;
    padding: 0px;
    }
.tmsIcon{
    background:url('../images/tmsIcon.png') no-repeat scroll 0 0 rgba(0, 0, 0, 0);
    display: inline-block;
    height: 38px;
    width: 46px;
    float:left;
    margin:0 22px 0 0;
    }
.globalBack{
    background-color:@tmcLightblue;
    color:#fff;
    padding: 0px;
    }
.globalIcon{
    background:url('../images/globalIcon.png') no-repeat scroll 0 0 rgba(0, 0, 0, 0);
    display: inline-block;
    height: 38px;
    width: 38px;
    float:left;
    margin:0 22px 0 0;
    }

/**************** LEADERSHIP SLIDER STYLES *****************/
.leadershipSlider{
    margin-top:50px;
    }
.leadershipCol {
    float: left;
    }
.leadershipName{
    color:#fff;
    height:auto;
    width:62%;
    background-color:@tmcOrange;
    padding:10px;
    margin:-85px 0 0 38%;
    border:1px solid #fff;
    display:block;
    float:left;
    }
.leadershipName .glyphicon.glyphicon-menu-right.pull-right{
    color:#fff;
    margin:-8px 0;
    }
.leadershipImg{
    display:block;
    float:left
    }
#carousel-index{
    margin:5px 0 0;
    }
.thumbnail {
    display: block;
    padding: 4px;
    margin-bottom: 0px;
    line-height: 1.42857143;
    -webkit-transition: all .2s ease-in-out;
    transition: all .2s ease-in-out;
    border-radius: 0; border: none;
    background-color: transparent;
    }
.carousel-control {
    top: 0;
    left: 0;
    bottom: 0;
    width: 15%;
    opacity: 1;
    font-size: 20px;
    color: #fff;
    text-align: center;
    text-shadow: none;
    }
.carousel-control.left {
    background-image: none;
    position:relative;
    display:table;
    height:45px;
    width:45px;
    }
.carousel-control.right {
    left: auto;
    position:relative;
    right: 0;
    background-image: none;
    display:table;
    height:45px;
    width:45px;
    }
.carousel-control {
    padding-top:0;
    }
.well{
    background-color: transparent;
    padding: 0px;
    border: 0px solid #fff;
    box-shadow:none;
    border-radius: 0px;
    margin-bottom: 0px;
    }
.btn-darkBlue{
    border-color:#fff;
    background-color:@tmcDarkblue;
    height:45px;
    width:45px;
    }
.btn-darkBlue:hover, .btn-darkBlue:active, .btn-darkBlue:focus{
    border-color:#fff;
    background-color:@tmcDarkblue;
    }
.carouselNext, .carouselPrev {
    color:#fff;
    }
/**************** My Carousel Feed Styles ****************/
.myFeed .active{
    background-color:@tmcDarkblue;
    }
.carousel-indicators li {
    background-color: rgba(0, 0, 0, 0);
    border: 1px solid @tmcDarkblue;
    }
.feedSlider{
    margin-top:80px;
    }
.myFeed {
    bottom: 0px;
    left: 0;
    list-style: outside none none;
    margin-left: 0;
    position:relative;
    text-align: center;
    width: 100%;
    }
.headlineBorderblue{
    display:inline;
    text-transform:uppercase;
    border-bottom:3px solid @tmcDarkblue;
    }
.headlineTitle{
    padding: 4px 0;
    }
.headlineGlyph{
    color:@tmcLightblue;
    margin:-25px 0;
    }
.headlineGlyph:hover{
    color:@tmcDarkblue;
    }
.headlineWrapper{
    border-bottom:1px solid @tmcDarkblue;
    width:60%;
    }
.headlineWrapper-green{
    border-bottom:1px solid @tmcGreen;
    width:60%;
    }
.headlineWrapper-white{
    border-bottom:1px solid #fff;
    width:60%;
    }
.myfeedDigit{
    color:@tmcDarkblue;
    font-size:5em;
    float:left;
    clear:both;
    }
/********  BEGIN FOOTER STYLES *********/
.footer{
    border-top:1px solid @tmcDarkblue;
    margin:50px auto;
    padding-top:25px;
    }
.subscribeText{
    color:@tmcLightblue;
    margin:-4px 0 4px;
    font-size:12px;
    }
.subscribe-input{
    width:78% !important;
    }
.copywriteText{
    color:@tmcDarkgrey;
    font-size:9.5px;
    }
.footerSocialwrapper{
    float:right;
    text-align:center;
    }
.languageSelector{
    float:left;
    }
.subscribeForm{
    float:right;
    }
.subscribe-form{
    float:none;
    margin:0 auto;
    width:100%;
    }
.subWrapper {
    float: left;
    width: 100%;
    }
.btnSubscribe {
    float: left;
    height: 34px;
    width: 34px;
    }

@media (max-width:@screen-lg) {
    .card{
        height:384px;
        }
    }
@media (max-width:@screen-md) {
    .card{
        height:300px;
        }
    .navbar-nav > li > a {
        border-bottom: 0px solid #fff;
        }
    .modeSelector{
        right:0px;
        }
    .search-input{
        width:78%;
        }
    .user-input, .pass-input{
        width:37%;
        }
    /*FOOTER*/
    .footerSocialwrapper{
        float:right;
        margin:10px auto;
        }
    .footerSocial li{
        padding-right: 5px;
        padding-left:0px;
        float:left;
        width:20%;
        display:inline;
        height:auto;
        }
    .subscribeForm{
        float:right;
        }
    .footerSocial {
        margin: auto;
/*      width: 100%;*/
        display:inline-block;
        }
    .subscribe-input {
        float: left;
        width: 80% !important;
        }
    }
@media (max-width:@screen-sm) {
    /*FEEDSLIDER*/
    .headlineWrapper, .headlineWrapper-green, .headlineWrapper-white{
        width:80%;
        }
    .mobile{
        color:#fff;
        }
    .headlineHero{
        font-size:small;
        }
    .heroText{
        top: 15%;
        }
    .skills{
        font-size:x-small;
        }
    .navbar-collapse{
        background-color: rgba(0,58,99,0.80);
        }
    .navbar-nav{
        margin:15px -15px;
        }
    .nav > li > a{
        text-align:left;
        padding-left:0px;
        padding-right:0px;
        color:#fff !important;
        }
    .nav > li > a:hover{
        color:@tmcLightblue !important;
        }
    .nav > li{
        margin:0px;
        }
    .navbar-default .navbar-nav > .active > a, .navbar-default .navbar-nav > .active > a:hover, .navbar-default .navbar-nav > .active > a:focus{
        border-bottom:0px solid transparent;
         color:@tmcLightblue !important;
        }
    .navbar-brand{
        max-width:156px;
        margin:0 0 0 5px;
        }
    #navbar-collapse-2, #navbar-collapse-1{
        position: absolute;
        width: 100%;
        z-index: 2147483647;
        }
    .subscribe-input{
        border-radius:0px;
        border-color:@tmcDarkblue;
        color:@tmcDarkgrey;
        float:left;
        margin-right:4px;
        }
    .search-form{
        background-color:transparent !important;
        color:#fff;
        }
    .mobileSearch-btn{
        border-color: #fff;
        background-color:transparent;
        }
    .mobileSearch-btn:hover{
        border-color: #fff;
        background-color:transparent;
        }
    .glyphicon-search {
        color: #fff;
        }
    .glyphicon-arrow-right{
        color: #fff;
        }
    .mobileLogin{
        text-align:left;
        }
    .login-control{
        float:none;
        }
    .user-input, .pass-input{
        margin:0 0 5px 0;
        width:100%;
        float:none;
        }
    .dropdown-menu{
        text-align:left;
        }
    .mobileDropdown{
        background-color: transparent !important;
        border: 1px solid #fff !important;
        color: #fff;
        margin: 5px 0 0;
        padding: 6px 13px;
        display: block;
        }
    .navbar-default .navbar-nav .open .dropdown-menu > li > a {
        background-color: #fff;
        padding: 5px 0;
        }
    .mobileList{
        background-color: #fff !important;
        border-radius: 0;
        padding: 0;
    }
    .navbar-nav .open .mobileList{
        position:absolute;
        width:100%;
        }
    .mobileList li{
        padding:4px 14px;
        border-bottom:1px solid @tmcDarkblue;
        }
    /*Footer*/
    .footerSocial{
        /*float:left;*/
        }
    .languageSelector img {
        margin: 0 auto;
        }
    .footerSocial {
        margin: 10px auto;
        }
    .footerSocial img{
        height:auto;
        }
    .subscribe-input {
        width: 82% !important;
        }
    .subscribeForm{
        float:none;
        height:auto;
        margin:0 auto;
        width:95%;
        }
    .subscribeArrow{
        color:@tmcOrange !important;
        }
    .card{
        height: 591px;
        }
    }
@media (max-width:@screen-xs) {
    .card{
        height: 275px;
        }
    }
    </style>

 <div class="container-fluid heroWrapper insideHerocolorPicker">
    <div class="row">
        <div class="col-sm-5">
            <img class="image-responsive insidePagehero" src="images/aboutHero.jpg" alt="" />
        </div>
        <div class="col-sm-5 col-sm-offset-1 pageIntroheadline">
          <div class="">
             <div class="headlineWrapper-white">
                  <div class="headlineTitle">
                      <h2 class="headlineBorderwhite">ABOUT</h2>
                  </div>
              </div>
              <p>TMC is..... nisi ut aliquip ex ea commodo consequat. consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem.</p>
          </div>
        </div>
    </div>
</div>



    <div class="container">
        <div class="row">
                <div class="col-sm-5 col-sm-offset-1 fourXfour">
                    <div class="">
                        <div class="headlineWrapper-green">
                            <div class="headlineTitle">
                                <h2 class="headlineBorder">WELCOME</h2>
                            </div>
                        </div>
                        <p>TMC is..... nisi ut aliquip ex ea commodo consequat. consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem.</p>
                        <a href="#"><button type="go" class="btn btn-default btn-blue"><i class="glyphicon glyphicon-menu-right"></i></button></a>
                    </div>
                </div>
                <div class="col-sm-5 col-sm-offset-1 fourXfour">
                    <div class="">
                        <div class="headlineWrapper-green">
                            <div class="headlineTitle">
                                <h2 class="headlineBorder">WELCOME</h2>
                            </div>
                        </div>
                        <p>TMC is..... nisi ut aliquip ex ea commodo consequat. consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem.</p>
                        <a href="#"><button type="go" class="btn btn-default btn-blue"><i class="glyphicon glyphicon-menu-right"></i></button></a>
                    </div>
                </div>
        </div>
    </div>

最佳答案

我觉得这是我最好的解决办法。我使用css中屏幕的微断点来完成这个任务。我也不得不改变我的结构,因为我不能让下面的标题正确排列。以下是我所做的:http://www.bootply.com/i5cb1GIdxk

<div class="container-fluid heroWrapper insideHerocolorPicker">
    <div class="row">
        <div class="col-sm-6 pageHero">
            <img class="image-responsive insidePagehero" src="images/aboutHero.jpg" alt="" />
        </div>
        <div class="container">
            <div class="row">
              <div class="col-sm-5 col-sm-offset-1 pageIntroheadline">
                 <div class="headlineWrapper-white">
                      <div class="headlineTitle">
                          <h2 class="headlineBorderwhite">ABOUT</h2>
                      </div>
                  </div>
                  <p>TMC is..... nisi ut aliquip ex ea commodo consequat. consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem.</p>
              </div>
            </div>
        </div>
    </div>
</div>

关于html - 将div居中,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/30110177/

10-11 23:31
查看更多