将div放在行内

Question

好的，我知道我只是犯了一个初学者的错误，但我似乎无法弄明白。我打算使用类jumbotron，但发现文本更改不是我想要的。我需要创建一个100％宽度的容器流体，一行和第一个col将包含50％的屏幕图像。另一半需要垂直和水平居中于图像。另一个问题是它需要与其正下方的标题对齐。这是我的代码，我会尝试为任何试图帮助我的人做一个bootply。

好的我不确定我会在那里停留多长时间，但这里有一个屏幕截图，显示我的内容和红色矩形是问题或模块需要的位置：https://www.chrobinson.com/en-us/-/media/177FC7F22DA6496AB26BAA75C230BE41.ash

Bootply：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>

Answer 1

我觉得这是我最好的解决方案。我使用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>