Flexbox 网格 - 等高列
Flexbox Grid - Equal Height Columns
我正在使用 Flexbox Grid (http://flexboxgrid.com/) 并且我试图使我的列高度相等而不是具有单独的高度。有谁知道如何做到这一点,因为我似乎无法在文档中找到任何相关内容。
<div class="container-fluid">
<div class="row middle-xs">
<div class="col-sm-6">
<div class="motability-bg">
<img src="/img/new-car-template/motab-bg.jpg" alt="motability seat">
</div>
</div>
<div class="col-sm-6">
<div class="motability-content-bg"></div>
<div class="motability-content">
<h1>Motability</h1>
<p>Hello</p>
</div>
</div>
</div>
</div>
目前我带有 img
标签的专栏比我的内容栏大。知道如何让它们相等吗?
谢谢,尼克
不要使用classmiddle-xs
旁排
.middle-xs {
-webkit-box-align: center;
-webkit-align-items: center;
-ms-flex-align: center;
align-items: center
}
以下片段:
/*! normalize.css v2.1.3 | MIT License | git.io/normalize */
article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
main,
nav,
section,
summary {
display: block
}
audio,
canvas,
video {
display: inline-block
}
audio:not([controls]) {
display: none;
height: 0
}
[hidden],
template {
display: none
}
html {
font-family: sans-serif;
-ms-text-size-adjust: 100%;
-webkit-text-size-adjust: 100%
}
a {
background: 0 0
}
a:focus {
outline: thin dotted
}
a:active,
a:hover {
outline: 0
}
h1 {
font-size: 2em;
margin: .67em 0
}
abbr[title] {
border-bottom: 1px dotted
}
b,
strong {
font-weight: 700
}
dfn {
font-style: italic
}
hr {
-moz-box-sizing: content-box;
box-sizing: content-box;
height: 0
}
mark {
background: #ff0;
color: #000
}
code,
kbd,
pre,
samp {
font-family: monospace, serif;
font-size: 1em
}
q {
quotes: "1C" "1D" "18" "19"
}
small {
font-size: 80%
}
sub,
sup {
font-size: 75%;
line-height: 0;
position: relative;
vertical-align: baseline
}
sup {
top: -.5em
}
sub {
bottom: -.25em
}
img {
border: 0
}
svg:not(:root) {
overflow: hidden
}
figure {
margin: 0
}
fieldset {
border: 1px solid silver;
margin: 0 2px;
padding: .35em .625em .75em
}
legend {
border: 0;
padding: 0
}
button,
input,
select,
textarea {
font-family: inherit;
font-size: 100%;
margin: 0
}
button,
input {
line-height: normal
}
button,
select {
text-transform: none
}
button,
html input[type=button],
input[type=reset],
input[type=submit] {
-webkit-appearance: button;
cursor: pointer
}
button[disabled],
html input[disabled] {
cursor: default
}
input[type=checkbox],
input[type=radio] {
box-sizing: border-box;
padding: 0
}
input[type=search] {
-webkit-appearance: textfield;
-moz-box-sizing: content-box;
-webkit-box-sizing: content-box;
box-sizing: content-box
}
input[type=search]::-webkit-search-cancel-button,
input[type=search]::-webkit-search-decoration {
-webkit-appearance: none
}
button::-moz-focus-inner,
input::-moz-focus-inner {
border: 0;
padding: 0
}
textarea {
overflow: auto;
vertical-align: top
}
table {
border-collapse: collapse;
border-spacing: 0
}
body {
box-sizing: border-box;
padding: 0;
margin: 0;
font-size: 18px;
font-family: HelveticaNeue-Light, "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
font-weight: 400;
background: #EEE;
line-height: 1.4rem
}
h1,
h2,
h3,
h4,
h5,
h6 {
font-family: Gibson, HelveticaNeue-Light, "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
color: #001A33
}
h2 {
font-size: 2rem;
margin: 1rem 0
}
:focus {
outline-color: transparent;
outline-style: none
}
h2+p {
margin: 0 0 2rem
}
a {
text-decoration: none;
color: #007FFF;
padding: 0 0 .2rem;
font-weight: 700
}
a:hover {
color: #007FFF
}
pre {
overflow-x: auto;
padding: 1.25em;
border: 1px solid #e6e6e6;
border-left-width: 5px;
margin: 1.6em 0;
font-size: .875em;
background: #fcfcfc;
white-space: pre;
word-wrap: normal
}
code {
color: #007FFF
}
.layout {
display: flex;
min-height: 100vh;
flex-direction: column
}
.page-nav {
box-sizing: border-box;
position: fixed;
padding: .5rem;
width: 100%;
background: 0 0
}
.page {
z-index: 0;
background: #EEE
}
.wrap {
box-sizing: border-box;
max-width: 1200px;
margin: 0 auto
}
.page-section {
padding-top: 3rem;
margin-bottom: 3rem
}
.page-features {
width: 100%;
background: #001a33;
overflow: scroll
}
.menu-button {
position: fixed;
top: .75rem;
right: .75rem;
z-index: 1;
box-sizing: border-box;
padding: .45rem;
height: 3rem;
width: 3rem;
background: #FFF;
border: 1px solid transparent;
user-select: none
}
.menu-button:hover {
border: 1px solid #007FFF;
border-radius: 2px
}
.menu-button:active {
background: #EEE;
border: 1px solid transparent
}
.open {
transform: translate3d(-15rem, 0, 0)
}
.menu-button-icon {
width: 2rem;
height: 2rem
}
.hero {
box-sizing: border-box;
padding: 2rem;
background: #FFF;
border: 1px solid #FFF;
border-radius: 2px
}
.hero-headline {
font-size: 3rem;
white-space: nowrap;
margin-bottom: 0
}
.hero-copy {
font-size: 1rem;
margin-bottom: 0;
padding: 0 2rem;
text-align: center
}
.slide-menu {
display: block;
position: fixed;
overflow: auto;
top: 0;
right: 0;
bottom: 0;
height: 100%;
width: 250px
}
.menu {
box-sizing: border-box;
padding-bottom: 5rem;
background: #001a33
}
.menu-header {
box-sizing: border-box;
padding: 3rem 3rem 0;
color: #eee
}
.menu-list {
margin: 0;
padding: 0;
list-style: none
}
.menu-list-item {
height: 3rem;
line-height: 3rem;
font-size: 1rem;
color: #007FFF;
background: 0 0;
transition: all .2s ease-in
}
.menu-link {
box-sizing: border-box;
padding-left: 3rem;
display: block;
color: #007FFF;
transition: color .2s ease-in
}
.menu-link:hover {
color: #3298ff;
border-bottom: 0
}
.link-top {
align-self: flex-end
}
.button {
position: relative;
display: inline-block;
box-sizing: border-box;
min-width: 11rem;
padding: 0 4rem;
margin: 1rem;
height: 3rem;
line-height: 3rem;
border: 1px solid #007FFF;
border-radius: 2px;
color: #007FFF;
font-size: 1.25rem;
transition: background-color, .15s
}
.button:hover {
background: #39F;
border-color: #39F;
color: #FFF;
text-shadow: 0 1px #007FFF
}
.button:active {
background: #007FFF;
color: #FFF;
border-top: 2px solid #06C
}
.box,
.box-first,
.box-large,
.box-nested,
.box-row {
position: relative;
box-sizing: border-box;
min-height: 1rem;
margin-bottom: 0;
background: #007FFF;
border: 1px solid #FFF;
border-radius: 2px;
overflow: hidden;
text-align: center;
color: #fff
}
.box-row {
margin-bottom: 1rem
}
.box-first {
background: #06C;
border-color: #007FFF
}
.box-nested {
background: #036;
border-color: #007FFF
}
.box-large {
height: 8rem
}
.box-container {
box-sizing: border-box;
padding: .5rem
}
.page-footer {
box-sizing: border-box;
padding-bottom: 3rem
}
.tag {
color: #000;
font-weight: 400
}
.end {
text-align: end
}
.invisible-xs {
display: none;
visibility: hidden
}
.visible-xs {
display: block;
visibility: visible
}
@media only screen and (min-width:48rem) {
body {
font-size: 16px
}
.slide-menu {
width: 25%
}
.open {
transform: translate3d(0, 0, 0)
}
.hero-headline {
font-size: 6rem;
margin-bottom: 2rem
}
.hero-copy {
font-size: 1.25rem;
margin-bottom: 2rem
}
.box,
.box-first,
.box-large,
.box-nested,
.box-row {
padding: 1rem
}
.invisible-md {
display: none;
visibility: hidden
}
.visible-md {
display: block;
visibility: visible
}
}
.container,
.container-fluid {
margin-right: auto;
margin-left: auto
}
.container-fluid {
padding-right: 2rem;
padding-left: 2rem
}
.row {
box-sizing: border-box;
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-box-flex: 0;
-webkit-flex: 0 1 auto;
-ms-flex: 0 1 auto;
flex: 0 1 auto;
-webkit-box-orient: horizontal;
-webkit-box-direction: normal;
-webkit-flex-direction: row;
-ms-flex-direction: row;
flex-direction: row;
-webkit-flex-wrap: wrap;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
margin-right: -.5rem;
margin-left: -.5rem
}
.row.reverse {
-webkit-box-orient: horizontal;
-webkit-box-direction: reverse;
-webkit-flex-direction: row-reverse;
-ms-flex-direction: row-reverse;
flex-direction: row-reverse
}
.col.reverse {
-webkit-box-orient: vertical;
-webkit-box-direction: reverse;
-webkit-flex-direction: column-reverse;
-ms-flex-direction: column-reverse;
flex-direction: column-reverse
}
.col-xs,
.col-xs-1,
.col-xs-10,
.col-xs-11,
.col-xs-12,
.col-xs-2,
.col-xs-3,
.col-xs-4,
.col-xs-5,
.col-xs-6,
.col-xs-7,
.col-xs-8,
.col-xs-9,
.col-xs-offset-1,
.col-xs-offset-10,
.col-xs-offset-11,
.col-xs-offset-12,
.col-xs-offset-2,
.col-xs-offset-3,
.col-xs-offset-4,
.col-xs-offset-5,
.col-xs-offset-6,
.col-xs-offset-7,
.col-xs-offset-8,
.col-xs-offset-9 {
box-sizing: border-box;
-webkit-box-flex: 0;
-webkit-flex: 0 0 auto;
-ms-flex: 0 0 auto;
flex: 0 0 auto;
padding-right: .5rem;
padding-left: .5rem
}
.col-xs {
-webkit-box-flex: 1;
-webkit-flex-grow: 1;
-ms-flex-positive: 1;
flex-grow: 1;
-webkit-flex-basis: 0;
-ms-flex-preferred-size: 0;
flex-basis: 0;
max-width: 100%
}
.col-xs-1 {
-webkit-flex-basis: 8.333%;
-ms-flex-preferred-size: 8.333%;
flex-basis: 8.333%;
max-width: 8.333%
}
.col-xs-2 {
-webkit-flex-basis: 16.667%;
-ms-flex-preferred-size: 16.667%;
flex-basis: 16.667%;
max-width: 16.667%
}
.col-xs-3 {
-webkit-flex-basis: 25%;
-ms-flex-preferred-size: 25%;
flex-basis: 25%;
max-width: 25%
}
.col-xs-4 {
-webkit-flex-basis: 33.333%;
-ms-flex-preferred-size: 33.333%;
flex-basis: 33.333%;
max-width: 33.333%
}
.col-xs-5 {
-webkit-flex-basis: 41.667%;
-ms-flex-preferred-size: 41.667%;
flex-basis: 41.667%;
max-width: 41.667%
}
.col-xs-6 {
-webkit-flex-basis: 50%;
-ms-flex-preferred-size: 50%;
flex-basis: 50%;
max-width: 50%
}
.col-xs-7 {
-webkit-flex-basis: 58.333%;
-ms-flex-preferred-size: 58.333%;
flex-basis: 58.333%;
max-width: 58.333%
}
.col-xs-8 {
-webkit-flex-basis: 66.667%;
-ms-flex-preferred-size: 66.667%;
flex-basis: 66.667%;
max-width: 66.667%
}
.col-xs-9 {
-webkit-flex-basis: 75%;
-ms-flex-preferred-size: 75%;
flex-basis: 75%;
max-width: 75%
}
.col-xs-10 {
-webkit-flex-basis: 83.333%;
-ms-flex-preferred-size: 83.333%;
flex-basis: 83.333%;
max-width: 83.333%
}
.col-xs-11 {
-webkit-flex-basis: 91.667%;
-ms-flex-preferred-size: 91.667%;
flex-basis: 91.667%;
max-width: 91.667%
}
.col-xs-12 {
-webkit-flex-basis: 100%;
-ms-flex-preferred-size: 100%;
flex-basis: 100%;
max-width: 100%
}
.col-xs-offset-1 {
margin-left: 8.333%
}
.col-xs-offset-2 {
margin-left: 16.667%
}
.col-xs-offset-3 {
margin-left: 25%
}
.col-xs-offset-4 {
margin-left: 33.333%
}
.col-xs-offset-5 {
margin-left: 41.667%
}
.col-xs-offset-6 {
margin-left: 50%
}
.col-xs-offset-7 {
margin-left: 58.333%
}
.col-xs-offset-8 {
margin-left: 66.667%
}
.col-xs-offset-9 {
margin-left: 75%
}
.col-xs-offset-10 {
margin-left: 83.333%
}
.col-xs-offset-11 {
margin-left: 91.667%
}
.start-xs {
-webkit-box-pack: start;
-webkit-justify-content: flex-start;
-ms-flex-pack: start;
justify-content: flex-start;
text-align: start
}
.center-xs {
-webkit-box-pack: center;
-webkit-justify-content: center;
-ms-flex-pack: center;
justify-content: center;
text-align: center
}
.end-xs {
-webkit-box-pack: end;
-webkit-justify-content: flex-end;
-ms-flex-pack: end;
justify-content: flex-end;
text-align: end
}
.top-xs {
-webkit-box-align: start;
-webkit-align-items: flex-start;
-ms-flex-align: start;
align-items: flex-start
}
.middle-xs {
-webkit-box-align: center;
-webkit-align-items: center;
-ms-flex-align: center;
align-items: center
}
.bottom-xs {
-webkit-box-align: end;
-webkit-align-items: flex-end;
-ms-flex-align: end;
align-items: flex-end
}
.around-xs {
-webkit-justify-content: space-around;
-ms-flex-pack: distribute;
justify-content: space-around
}
.between-xs {
-webkit-box-pack: justify;
-webkit-justify-content: space-between;
-ms-flex-pack: justify;
justify-content: space-between
}
.first-xs {
-webkit-box-ordinal-group: 0;
-webkit-order: -1;
-ms-flex-order: -1;
order: -1
}
.last-xs {
-webkit-box-ordinal-group: 2;
-webkit-order: 1;
-ms-flex-order: 1;
order: 1
}
@media only screen and (min-width:48em) {
.container {
width: 49rem
}
.col-sm,
.col-sm-1,
.col-sm-10,
.col-sm-11,
.col-sm-12,
.col-sm-2,
.col-sm-3,
.col-sm-4,
.col-sm-5,
.col-sm-6,
.col-sm-7,
.col-sm-8,
.col-sm-9,
.col-sm-offset-1,
.col-sm-offset-10,
.col-sm-offset-11,
.col-sm-offset-12,
.col-sm-offset-2,
.col-sm-offset-3,
.col-sm-offset-4,
.col-sm-offset-5,
.col-sm-offset-6,
.col-sm-offset-7,
.col-sm-offset-8,
.col-sm-offset-9 {
box-sizing: border-box;
-webkit-box-flex: 0;
-webkit-flex: 0 0 auto;
-ms-flex: 0 0 auto;
flex: 0 0 auto;
padding-right: .5rem;
padding-left: .5rem
}
.col-sm {
-webkit-box-flex: 1;
-webkit-flex-grow: 1;
-ms-flex-positive: 1;
flex-grow: 1;
-webkit-flex-basis: 0;
-ms-flex-preferred-size: 0;
flex-basis: 0;
max-width: 100%
}
.col-sm-1 {
-webkit-flex-basis: 8.333%;
-ms-flex-preferred-size: 8.333%;
flex-basis: 8.333%;
max-width: 8.333%
}
.col-sm-2 {
-webkit-flex-basis: 16.667%;
-ms-flex-preferred-size: 16.667%;
flex-basis: 16.667%;
max-width: 16.667%
}
.col-sm-3 {
-webkit-flex-basis: 25%;
-ms-flex-preferred-size: 25%;
flex-basis: 25%;
max-width: 25%
}
.col-sm-4 {
-webkit-flex-basis: 33.333%;
-ms-flex-preferred-size: 33.333%;
flex-basis: 33.333%;
max-width: 33.333%
}
.col-sm-5 {
-webkit-flex-basis: 41.667%;
-ms-flex-preferred-size: 41.667%;
flex-basis: 41.667%;
max-width: 41.667%
}
.col-sm-6 {
-webkit-flex-basis: 50%;
-ms-flex-preferred-size: 50%;
flex-basis: 50%;
max-width: 50%
}
.col-sm-7 {
-webkit-flex-basis: 58.333%;
-ms-flex-preferred-size: 58.333%;
flex-basis: 58.333%;
max-width: 58.333%
}
.col-sm-8 {
-webkit-flex-basis: 66.667%;
-ms-flex-preferred-size: 66.667%;
flex-basis: 66.667%;
max-width: 66.667%
}
.col-sm-9 {
-webkit-flex-basis: 75%;
-ms-flex-preferred-size: 75%;
flex-basis: 75%;
max-width: 75%
}
.col-sm-10 {
-webkit-flex-basis: 83.333%;
-ms-flex-preferred-size: 83.333%;
flex-basis: 83.333%;
max-width: 83.333%
}
.col-sm-11 {
-webkit-flex-basis: 91.667%;
-ms-flex-preferred-size: 91.667%;
flex-basis: 91.667%;
max-width: 91.667%
}
.col-sm-12 {
-webkit-flex-basis: 100%;
-ms-flex-preferred-size: 100%;
flex-basis: 100%;
max-width: 100%
}
.col-sm-offset-1 {
margin-left: 8.333%
}
.col-sm-offset-2 {
margin-left: 16.667%
}
.col-sm-offset-3 {
margin-left: 25%
}
.col-sm-offset-4 {
margin-left: 33.333%
}
.col-sm-offset-5 {
margin-left: 41.667%
}
.col-sm-offset-6 {
margin-left: 50%
}
.col-sm-offset-7 {
margin-left: 58.333%
}
.col-sm-offset-8 {
margin-left: 66.667%
}
.col-sm-offset-9 {
margin-left: 75%
}
.col-sm-offset-10 {
margin-left: 83.333%
}
.col-sm-offset-11 {
margin-left: 91.667%
}
.start-sm {
-webkit-box-pack: start;
-webkit-justify-content: flex-start;
-ms-flex-pack: start;
justify-content: flex-start;
text-align: start
}
.center-sm {
-webkit-box-pack: center;
-webkit-justify-content: center;
-ms-flex-pack: center;
justify-content: center;
text-align: center
}
.end-sm {
-webkit-box-pack: end;
-webkit-justify-content: flex-end;
-ms-flex-pack: end;
justify-content: flex-end;
text-align: end
}
.top-sm {
-webkit-box-align: start;
-webkit-align-items: flex-start;
-ms-flex-align: start;
align-items: flex-start
}
.middle-sm {
-webkit-box-align: center;
-webkit-align-items: center;
-ms-flex-align: center;
align-items: center
}
.bottom-sm {
-webkit-box-align: end;
-webkit-align-items: flex-end;
-ms-flex-align: end;
align-items: flex-end
}
.around-sm {
-webkit-justify-content: space-around;
-ms-flex-pack: distribute;
justify-content: space-around
}
.between-sm {
-webkit-box-pack: justify;
-webkit-justify-content: space-between;
-ms-flex-pack: justify;
justify-content: space-between
}
.first-sm {
-webkit-box-ordinal-group: 0;
-webkit-order: -1;
-ms-flex-order: -1;
order: -1
}
.last-sm {
-webkit-box-ordinal-group: 2;
-webkit-order: 1;
-ms-flex-order: 1;
order: 1
}
}
@media only screen and (min-width:64em) {
.container {
width: 65rem
}
.col-md,
.col-md-1,
.col-md-10,
.col-md-11,
.col-md-12,
.col-md-2,
.col-md-3,
.col-md-4,
.col-md-5,
.col-md-6,
.col-md-7,
.col-md-8,
.col-md-9,
.col-md-offset-1,
.col-md-offset-10,
.col-md-offset-11,
.col-md-offset-12,
.col-md-offset-2,
.col-md-offset-3,
.col-md-offset-4,
.col-md-offset-5,
.col-md-offset-6,
.col-md-offset-7,
.col-md-offset-8,
.col-md-offset-9 {
box-sizing: border-box;
-webkit-box-flex: 0;
-webkit-flex: 0 0 auto;
-ms-flex: 0 0 auto;
flex: 0 0 auto;
padding-right: .5rem;
padding-left: .5rem
}
.col-md {
-webkit-box-flex: 1;
-webkit-flex-grow: 1;
-ms-flex-positive: 1;
flex-grow: 1;
-webkit-flex-basis: 0;
-ms-flex-preferred-size: 0;
flex-basis: 0;
max-width: 100%
}
.col-md-1 {
-webkit-flex-basis: 8.333%;
-ms-flex-preferred-size: 8.333%;
flex-basis: 8.333%;
max-width: 8.333%
}
.col-md-2 {
-webkit-flex-basis: 16.667%;
-ms-flex-preferred-size: 16.667%;
flex-basis: 16.667%;
max-width: 16.667%
}
.col-md-3 {
-webkit-flex-basis: 25%;
-ms-flex-preferred-size: 25%;
flex-basis: 25%;
max-width: 25%
}
.col-md-4 {
-webkit-flex-basis: 33.333%;
-ms-flex-preferred-size: 33.333%;
flex-basis: 33.333%;
max-width: 33.333%
}
.col-md-5 {
-webkit-flex-basis: 41.667%;
-ms-flex-preferred-size: 41.667%;
flex-basis: 41.667%;
max-width: 41.667%
}
.col-md-6 {
-webkit-flex-basis: 50%;
-ms-flex-preferred-size: 50%;
flex-basis: 50%;
max-width: 50%
}
.col-md-7 {
-webkit-flex-basis: 58.333%;
-ms-flex-preferred-size: 58.333%;
flex-basis: 58.333%;
max-width: 58.333%
}
.col-md-8 {
-webkit-flex-basis: 66.667%;
-ms-flex-preferred-size: 66.667%;
flex-basis: 66.667%;
max-width: 66.667%
}
.col-md-9 {
-webkit-flex-basis: 75%;
-ms-flex-preferred-size: 75%;
flex-basis: 75%;
max-width: 75%
}
.col-md-10 {
-webkit-flex-basis: 83.333%;
-ms-flex-preferred-size: 83.333%;
flex-basis: 83.333%;
max-width: 83.333%
}
.col-md-11 {
-webkit-flex-basis: 91.667%;
-ms-flex-preferred-size: 91.667%;
flex-basis: 91.667%;
max-width: 91.667%
}
.col-md-12 {
-webkit-flex-basis: 100%;
-ms-flex-preferred-size: 100%;
flex-basis: 100%;
max-width: 100%
}
.col-md-offset-1 {
margin-left: 8.333%
}
.col-md-offset-2 {
margin-left: 16.667%
}
.col-md-offset-3 {
margin-left: 25%
}
.col-md-offset-4 {
margin-left: 33.333%
}
.col-md-offset-5 {
margin-left: 41.667%
}
.col-md-offset-6 {
margin-left: 50%
}
.col-md-offset-7 {
margin-left: 58.333%
}
.col-md-offset-8 {
margin-left: 66.667%
}
.col-md-offset-9 {
margin-left: 75%
}
.col-md-offset-10 {
margin-left: 83.333%
}
.col-md-offset-11 {
margin-left: 91.667%
}
.start-md {
-webkit-box-pack: start;
-webkit-justify-content: flex-start;
-ms-flex-pack: start;
justify-content: flex-start;
text-align: start
}
.center-md {
-webkit-box-pack: center;
-webkit-justify-content: center;
-ms-flex-pack: center;
justify-content: center;
text-align: center
}
.end-md {
-webkit-box-pack: end;
-webkit-justify-content: flex-end;
-ms-flex-pack: end;
justify-content: flex-end;
text-align: end
}
.top-md {
-webkit-box-align: start;
-webkit-align-items: flex-start;
-ms-flex-align: start;
align-items: flex-start
}
.middle-md {
-webkit-box-align: center;
-webkit-align-items: center;
-ms-flex-align: center;
align-items: center
}
.bottom-md {
-webkit-box-align: end;
-webkit-align-items: flex-end;
-ms-flex-align: end;
align-items: flex-end
}
.around-md {
-webkit-justify-content: space-around;
-ms-flex-pack: distribute;
justify-content: space-around
}
.between-md {
-webkit-box-pack: justify;
-webkit-justify-content: space-between;
-ms-flex-pack: justify;
justify-content: space-between
}
.first-md {
-webkit-box-ordinal-group: 0;
-webkit-order: -1;
-ms-flex-order: -1;
order: -1
}
.last-md {
-webkit-box-ordinal-group: 2;
-webkit-order: 1;
-ms-flex-order: 1;
order: 1
}
}
.col-sm-6 {background:turquoise;}
<div class="container-fluid">
<div class="row">
<div class="col-sm-6">
<div class="motability-bg">
<img src="/img/new-car-template/motab-bg.jpg" alt="motability seat">
</div>
</div>
<div class="col-sm-6">
<div class="motability-content-bg"></div>
<div class="motability-content">
<h1>Motability</h1>
<p>Hello</p>
</div>
</div>
</div>
</div>
我正在使用 Flexbox Grid (http://flexboxgrid.com/) 并且我试图使我的列高度相等而不是具有单独的高度。有谁知道如何做到这一点,因为我似乎无法在文档中找到任何相关内容。
<div class="container-fluid">
<div class="row middle-xs">
<div class="col-sm-6">
<div class="motability-bg">
<img src="/img/new-car-template/motab-bg.jpg" alt="motability seat">
</div>
</div>
<div class="col-sm-6">
<div class="motability-content-bg"></div>
<div class="motability-content">
<h1>Motability</h1>
<p>Hello</p>
</div>
</div>
</div>
</div>
目前我带有 img
标签的专栏比我的内容栏大。知道如何让它们相等吗?
谢谢,尼克
不要使用classmiddle-xs
旁排
.middle-xs {
-webkit-box-align: center;
-webkit-align-items: center;
-ms-flex-align: center;
align-items: center
}
以下片段:
/*! normalize.css v2.1.3 | MIT License | git.io/normalize */
article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
main,
nav,
section,
summary {
display: block
}
audio,
canvas,
video {
display: inline-block
}
audio:not([controls]) {
display: none;
height: 0
}
[hidden],
template {
display: none
}
html {
font-family: sans-serif;
-ms-text-size-adjust: 100%;
-webkit-text-size-adjust: 100%
}
a {
background: 0 0
}
a:focus {
outline: thin dotted
}
a:active,
a:hover {
outline: 0
}
h1 {
font-size: 2em;
margin: .67em 0
}
abbr[title] {
border-bottom: 1px dotted
}
b,
strong {
font-weight: 700
}
dfn {
font-style: italic
}
hr {
-moz-box-sizing: content-box;
box-sizing: content-box;
height: 0
}
mark {
background: #ff0;
color: #000
}
code,
kbd,
pre,
samp {
font-family: monospace, serif;
font-size: 1em
}
q {
quotes: "1C" "1D" "18" "19"
}
small {
font-size: 80%
}
sub,
sup {
font-size: 75%;
line-height: 0;
position: relative;
vertical-align: baseline
}
sup {
top: -.5em
}
sub {
bottom: -.25em
}
img {
border: 0
}
svg:not(:root) {
overflow: hidden
}
figure {
margin: 0
}
fieldset {
border: 1px solid silver;
margin: 0 2px;
padding: .35em .625em .75em
}
legend {
border: 0;
padding: 0
}
button,
input,
select,
textarea {
font-family: inherit;
font-size: 100%;
margin: 0
}
button,
input {
line-height: normal
}
button,
select {
text-transform: none
}
button,
html input[type=button],
input[type=reset],
input[type=submit] {
-webkit-appearance: button;
cursor: pointer
}
button[disabled],
html input[disabled] {
cursor: default
}
input[type=checkbox],
input[type=radio] {
box-sizing: border-box;
padding: 0
}
input[type=search] {
-webkit-appearance: textfield;
-moz-box-sizing: content-box;
-webkit-box-sizing: content-box;
box-sizing: content-box
}
input[type=search]::-webkit-search-cancel-button,
input[type=search]::-webkit-search-decoration {
-webkit-appearance: none
}
button::-moz-focus-inner,
input::-moz-focus-inner {
border: 0;
padding: 0
}
textarea {
overflow: auto;
vertical-align: top
}
table {
border-collapse: collapse;
border-spacing: 0
}
body {
box-sizing: border-box;
padding: 0;
margin: 0;
font-size: 18px;
font-family: HelveticaNeue-Light, "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
font-weight: 400;
background: #EEE;
line-height: 1.4rem
}
h1,
h2,
h3,
h4,
h5,
h6 {
font-family: Gibson, HelveticaNeue-Light, "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
color: #001A33
}
h2 {
font-size: 2rem;
margin: 1rem 0
}
:focus {
outline-color: transparent;
outline-style: none
}
h2+p {
margin: 0 0 2rem
}
a {
text-decoration: none;
color: #007FFF;
padding: 0 0 .2rem;
font-weight: 700
}
a:hover {
color: #007FFF
}
pre {
overflow-x: auto;
padding: 1.25em;
border: 1px solid #e6e6e6;
border-left-width: 5px;
margin: 1.6em 0;
font-size: .875em;
background: #fcfcfc;
white-space: pre;
word-wrap: normal
}
code {
color: #007FFF
}
.layout {
display: flex;
min-height: 100vh;
flex-direction: column
}
.page-nav {
box-sizing: border-box;
position: fixed;
padding: .5rem;
width: 100%;
background: 0 0
}
.page {
z-index: 0;
background: #EEE
}
.wrap {
box-sizing: border-box;
max-width: 1200px;
margin: 0 auto
}
.page-section {
padding-top: 3rem;
margin-bottom: 3rem
}
.page-features {
width: 100%;
background: #001a33;
overflow: scroll
}
.menu-button {
position: fixed;
top: .75rem;
right: .75rem;
z-index: 1;
box-sizing: border-box;
padding: .45rem;
height: 3rem;
width: 3rem;
background: #FFF;
border: 1px solid transparent;
user-select: none
}
.menu-button:hover {
border: 1px solid #007FFF;
border-radius: 2px
}
.menu-button:active {
background: #EEE;
border: 1px solid transparent
}
.open {
transform: translate3d(-15rem, 0, 0)
}
.menu-button-icon {
width: 2rem;
height: 2rem
}
.hero {
box-sizing: border-box;
padding: 2rem;
background: #FFF;
border: 1px solid #FFF;
border-radius: 2px
}
.hero-headline {
font-size: 3rem;
white-space: nowrap;
margin-bottom: 0
}
.hero-copy {
font-size: 1rem;
margin-bottom: 0;
padding: 0 2rem;
text-align: center
}
.slide-menu {
display: block;
position: fixed;
overflow: auto;
top: 0;
right: 0;
bottom: 0;
height: 100%;
width: 250px
}
.menu {
box-sizing: border-box;
padding-bottom: 5rem;
background: #001a33
}
.menu-header {
box-sizing: border-box;
padding: 3rem 3rem 0;
color: #eee
}
.menu-list {
margin: 0;
padding: 0;
list-style: none
}
.menu-list-item {
height: 3rem;
line-height: 3rem;
font-size: 1rem;
color: #007FFF;
background: 0 0;
transition: all .2s ease-in
}
.menu-link {
box-sizing: border-box;
padding-left: 3rem;
display: block;
color: #007FFF;
transition: color .2s ease-in
}
.menu-link:hover {
color: #3298ff;
border-bottom: 0
}
.link-top {
align-self: flex-end
}
.button {
position: relative;
display: inline-block;
box-sizing: border-box;
min-width: 11rem;
padding: 0 4rem;
margin: 1rem;
height: 3rem;
line-height: 3rem;
border: 1px solid #007FFF;
border-radius: 2px;
color: #007FFF;
font-size: 1.25rem;
transition: background-color, .15s
}
.button:hover {
background: #39F;
border-color: #39F;
color: #FFF;
text-shadow: 0 1px #007FFF
}
.button:active {
background: #007FFF;
color: #FFF;
border-top: 2px solid #06C
}
.box,
.box-first,
.box-large,
.box-nested,
.box-row {
position: relative;
box-sizing: border-box;
min-height: 1rem;
margin-bottom: 0;
background: #007FFF;
border: 1px solid #FFF;
border-radius: 2px;
overflow: hidden;
text-align: center;
color: #fff
}
.box-row {
margin-bottom: 1rem
}
.box-first {
background: #06C;
border-color: #007FFF
}
.box-nested {
background: #036;
border-color: #007FFF
}
.box-large {
height: 8rem
}
.box-container {
box-sizing: border-box;
padding: .5rem
}
.page-footer {
box-sizing: border-box;
padding-bottom: 3rem
}
.tag {
color: #000;
font-weight: 400
}
.end {
text-align: end
}
.invisible-xs {
display: none;
visibility: hidden
}
.visible-xs {
display: block;
visibility: visible
}
@media only screen and (min-width:48rem) {
body {
font-size: 16px
}
.slide-menu {
width: 25%
}
.open {
transform: translate3d(0, 0, 0)
}
.hero-headline {
font-size: 6rem;
margin-bottom: 2rem
}
.hero-copy {
font-size: 1.25rem;
margin-bottom: 2rem
}
.box,
.box-first,
.box-large,
.box-nested,
.box-row {
padding: 1rem
}
.invisible-md {
display: none;
visibility: hidden
}
.visible-md {
display: block;
visibility: visible
}
}
.container,
.container-fluid {
margin-right: auto;
margin-left: auto
}
.container-fluid {
padding-right: 2rem;
padding-left: 2rem
}
.row {
box-sizing: border-box;
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-box-flex: 0;
-webkit-flex: 0 1 auto;
-ms-flex: 0 1 auto;
flex: 0 1 auto;
-webkit-box-orient: horizontal;
-webkit-box-direction: normal;
-webkit-flex-direction: row;
-ms-flex-direction: row;
flex-direction: row;
-webkit-flex-wrap: wrap;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
margin-right: -.5rem;
margin-left: -.5rem
}
.row.reverse {
-webkit-box-orient: horizontal;
-webkit-box-direction: reverse;
-webkit-flex-direction: row-reverse;
-ms-flex-direction: row-reverse;
flex-direction: row-reverse
}
.col.reverse {
-webkit-box-orient: vertical;
-webkit-box-direction: reverse;
-webkit-flex-direction: column-reverse;
-ms-flex-direction: column-reverse;
flex-direction: column-reverse
}
.col-xs,
.col-xs-1,
.col-xs-10,
.col-xs-11,
.col-xs-12,
.col-xs-2,
.col-xs-3,
.col-xs-4,
.col-xs-5,
.col-xs-6,
.col-xs-7,
.col-xs-8,
.col-xs-9,
.col-xs-offset-1,
.col-xs-offset-10,
.col-xs-offset-11,
.col-xs-offset-12,
.col-xs-offset-2,
.col-xs-offset-3,
.col-xs-offset-4,
.col-xs-offset-5,
.col-xs-offset-6,
.col-xs-offset-7,
.col-xs-offset-8,
.col-xs-offset-9 {
box-sizing: border-box;
-webkit-box-flex: 0;
-webkit-flex: 0 0 auto;
-ms-flex: 0 0 auto;
flex: 0 0 auto;
padding-right: .5rem;
padding-left: .5rem
}
.col-xs {
-webkit-box-flex: 1;
-webkit-flex-grow: 1;
-ms-flex-positive: 1;
flex-grow: 1;
-webkit-flex-basis: 0;
-ms-flex-preferred-size: 0;
flex-basis: 0;
max-width: 100%
}
.col-xs-1 {
-webkit-flex-basis: 8.333%;
-ms-flex-preferred-size: 8.333%;
flex-basis: 8.333%;
max-width: 8.333%
}
.col-xs-2 {
-webkit-flex-basis: 16.667%;
-ms-flex-preferred-size: 16.667%;
flex-basis: 16.667%;
max-width: 16.667%
}
.col-xs-3 {
-webkit-flex-basis: 25%;
-ms-flex-preferred-size: 25%;
flex-basis: 25%;
max-width: 25%
}
.col-xs-4 {
-webkit-flex-basis: 33.333%;
-ms-flex-preferred-size: 33.333%;
flex-basis: 33.333%;
max-width: 33.333%
}
.col-xs-5 {
-webkit-flex-basis: 41.667%;
-ms-flex-preferred-size: 41.667%;
flex-basis: 41.667%;
max-width: 41.667%
}
.col-xs-6 {
-webkit-flex-basis: 50%;
-ms-flex-preferred-size: 50%;
flex-basis: 50%;
max-width: 50%
}
.col-xs-7 {
-webkit-flex-basis: 58.333%;
-ms-flex-preferred-size: 58.333%;
flex-basis: 58.333%;
max-width: 58.333%
}
.col-xs-8 {
-webkit-flex-basis: 66.667%;
-ms-flex-preferred-size: 66.667%;
flex-basis: 66.667%;
max-width: 66.667%
}
.col-xs-9 {
-webkit-flex-basis: 75%;
-ms-flex-preferred-size: 75%;
flex-basis: 75%;
max-width: 75%
}
.col-xs-10 {
-webkit-flex-basis: 83.333%;
-ms-flex-preferred-size: 83.333%;
flex-basis: 83.333%;
max-width: 83.333%
}
.col-xs-11 {
-webkit-flex-basis: 91.667%;
-ms-flex-preferred-size: 91.667%;
flex-basis: 91.667%;
max-width: 91.667%
}
.col-xs-12 {
-webkit-flex-basis: 100%;
-ms-flex-preferred-size: 100%;
flex-basis: 100%;
max-width: 100%
}
.col-xs-offset-1 {
margin-left: 8.333%
}
.col-xs-offset-2 {
margin-left: 16.667%
}
.col-xs-offset-3 {
margin-left: 25%
}
.col-xs-offset-4 {
margin-left: 33.333%
}
.col-xs-offset-5 {
margin-left: 41.667%
}
.col-xs-offset-6 {
margin-left: 50%
}
.col-xs-offset-7 {
margin-left: 58.333%
}
.col-xs-offset-8 {
margin-left: 66.667%
}
.col-xs-offset-9 {
margin-left: 75%
}
.col-xs-offset-10 {
margin-left: 83.333%
}
.col-xs-offset-11 {
margin-left: 91.667%
}
.start-xs {
-webkit-box-pack: start;
-webkit-justify-content: flex-start;
-ms-flex-pack: start;
justify-content: flex-start;
text-align: start
}
.center-xs {
-webkit-box-pack: center;
-webkit-justify-content: center;
-ms-flex-pack: center;
justify-content: center;
text-align: center
}
.end-xs {
-webkit-box-pack: end;
-webkit-justify-content: flex-end;
-ms-flex-pack: end;
justify-content: flex-end;
text-align: end
}
.top-xs {
-webkit-box-align: start;
-webkit-align-items: flex-start;
-ms-flex-align: start;
align-items: flex-start
}
.middle-xs {
-webkit-box-align: center;
-webkit-align-items: center;
-ms-flex-align: center;
align-items: center
}
.bottom-xs {
-webkit-box-align: end;
-webkit-align-items: flex-end;
-ms-flex-align: end;
align-items: flex-end
}
.around-xs {
-webkit-justify-content: space-around;
-ms-flex-pack: distribute;
justify-content: space-around
}
.between-xs {
-webkit-box-pack: justify;
-webkit-justify-content: space-between;
-ms-flex-pack: justify;
justify-content: space-between
}
.first-xs {
-webkit-box-ordinal-group: 0;
-webkit-order: -1;
-ms-flex-order: -1;
order: -1
}
.last-xs {
-webkit-box-ordinal-group: 2;
-webkit-order: 1;
-ms-flex-order: 1;
order: 1
}
@media only screen and (min-width:48em) {
.container {
width: 49rem
}
.col-sm,
.col-sm-1,
.col-sm-10,
.col-sm-11,
.col-sm-12,
.col-sm-2,
.col-sm-3,
.col-sm-4,
.col-sm-5,
.col-sm-6,
.col-sm-7,
.col-sm-8,
.col-sm-9,
.col-sm-offset-1,
.col-sm-offset-10,
.col-sm-offset-11,
.col-sm-offset-12,
.col-sm-offset-2,
.col-sm-offset-3,
.col-sm-offset-4,
.col-sm-offset-5,
.col-sm-offset-6,
.col-sm-offset-7,
.col-sm-offset-8,
.col-sm-offset-9 {
box-sizing: border-box;
-webkit-box-flex: 0;
-webkit-flex: 0 0 auto;
-ms-flex: 0 0 auto;
flex: 0 0 auto;
padding-right: .5rem;
padding-left: .5rem
}
.col-sm {
-webkit-box-flex: 1;
-webkit-flex-grow: 1;
-ms-flex-positive: 1;
flex-grow: 1;
-webkit-flex-basis: 0;
-ms-flex-preferred-size: 0;
flex-basis: 0;
max-width: 100%
}
.col-sm-1 {
-webkit-flex-basis: 8.333%;
-ms-flex-preferred-size: 8.333%;
flex-basis: 8.333%;
max-width: 8.333%
}
.col-sm-2 {
-webkit-flex-basis: 16.667%;
-ms-flex-preferred-size: 16.667%;
flex-basis: 16.667%;
max-width: 16.667%
}
.col-sm-3 {
-webkit-flex-basis: 25%;
-ms-flex-preferred-size: 25%;
flex-basis: 25%;
max-width: 25%
}
.col-sm-4 {
-webkit-flex-basis: 33.333%;
-ms-flex-preferred-size: 33.333%;
flex-basis: 33.333%;
max-width: 33.333%
}
.col-sm-5 {
-webkit-flex-basis: 41.667%;
-ms-flex-preferred-size: 41.667%;
flex-basis: 41.667%;
max-width: 41.667%
}
.col-sm-6 {
-webkit-flex-basis: 50%;
-ms-flex-preferred-size: 50%;
flex-basis: 50%;
max-width: 50%
}
.col-sm-7 {
-webkit-flex-basis: 58.333%;
-ms-flex-preferred-size: 58.333%;
flex-basis: 58.333%;
max-width: 58.333%
}
.col-sm-8 {
-webkit-flex-basis: 66.667%;
-ms-flex-preferred-size: 66.667%;
flex-basis: 66.667%;
max-width: 66.667%
}
.col-sm-9 {
-webkit-flex-basis: 75%;
-ms-flex-preferred-size: 75%;
flex-basis: 75%;
max-width: 75%
}
.col-sm-10 {
-webkit-flex-basis: 83.333%;
-ms-flex-preferred-size: 83.333%;
flex-basis: 83.333%;
max-width: 83.333%
}
.col-sm-11 {
-webkit-flex-basis: 91.667%;
-ms-flex-preferred-size: 91.667%;
flex-basis: 91.667%;
max-width: 91.667%
}
.col-sm-12 {
-webkit-flex-basis: 100%;
-ms-flex-preferred-size: 100%;
flex-basis: 100%;
max-width: 100%
}
.col-sm-offset-1 {
margin-left: 8.333%
}
.col-sm-offset-2 {
margin-left: 16.667%
}
.col-sm-offset-3 {
margin-left: 25%
}
.col-sm-offset-4 {
margin-left: 33.333%
}
.col-sm-offset-5 {
margin-left: 41.667%
}
.col-sm-offset-6 {
margin-left: 50%
}
.col-sm-offset-7 {
margin-left: 58.333%
}
.col-sm-offset-8 {
margin-left: 66.667%
}
.col-sm-offset-9 {
margin-left: 75%
}
.col-sm-offset-10 {
margin-left: 83.333%
}
.col-sm-offset-11 {
margin-left: 91.667%
}
.start-sm {
-webkit-box-pack: start;
-webkit-justify-content: flex-start;
-ms-flex-pack: start;
justify-content: flex-start;
text-align: start
}
.center-sm {
-webkit-box-pack: center;
-webkit-justify-content: center;
-ms-flex-pack: center;
justify-content: center;
text-align: center
}
.end-sm {
-webkit-box-pack: end;
-webkit-justify-content: flex-end;
-ms-flex-pack: end;
justify-content: flex-end;
text-align: end
}
.top-sm {
-webkit-box-align: start;
-webkit-align-items: flex-start;
-ms-flex-align: start;
align-items: flex-start
}
.middle-sm {
-webkit-box-align: center;
-webkit-align-items: center;
-ms-flex-align: center;
align-items: center
}
.bottom-sm {
-webkit-box-align: end;
-webkit-align-items: flex-end;
-ms-flex-align: end;
align-items: flex-end
}
.around-sm {
-webkit-justify-content: space-around;
-ms-flex-pack: distribute;
justify-content: space-around
}
.between-sm {
-webkit-box-pack: justify;
-webkit-justify-content: space-between;
-ms-flex-pack: justify;
justify-content: space-between
}
.first-sm {
-webkit-box-ordinal-group: 0;
-webkit-order: -1;
-ms-flex-order: -1;
order: -1
}
.last-sm {
-webkit-box-ordinal-group: 2;
-webkit-order: 1;
-ms-flex-order: 1;
order: 1
}
}
@media only screen and (min-width:64em) {
.container {
width: 65rem
}
.col-md,
.col-md-1,
.col-md-10,
.col-md-11,
.col-md-12,
.col-md-2,
.col-md-3,
.col-md-4,
.col-md-5,
.col-md-6,
.col-md-7,
.col-md-8,
.col-md-9,
.col-md-offset-1,
.col-md-offset-10,
.col-md-offset-11,
.col-md-offset-12,
.col-md-offset-2,
.col-md-offset-3,
.col-md-offset-4,
.col-md-offset-5,
.col-md-offset-6,
.col-md-offset-7,
.col-md-offset-8,
.col-md-offset-9 {
box-sizing: border-box;
-webkit-box-flex: 0;
-webkit-flex: 0 0 auto;
-ms-flex: 0 0 auto;
flex: 0 0 auto;
padding-right: .5rem;
padding-left: .5rem
}
.col-md {
-webkit-box-flex: 1;
-webkit-flex-grow: 1;
-ms-flex-positive: 1;
flex-grow: 1;
-webkit-flex-basis: 0;
-ms-flex-preferred-size: 0;
flex-basis: 0;
max-width: 100%
}
.col-md-1 {
-webkit-flex-basis: 8.333%;
-ms-flex-preferred-size: 8.333%;
flex-basis: 8.333%;
max-width: 8.333%
}
.col-md-2 {
-webkit-flex-basis: 16.667%;
-ms-flex-preferred-size: 16.667%;
flex-basis: 16.667%;
max-width: 16.667%
}
.col-md-3 {
-webkit-flex-basis: 25%;
-ms-flex-preferred-size: 25%;
flex-basis: 25%;
max-width: 25%
}
.col-md-4 {
-webkit-flex-basis: 33.333%;
-ms-flex-preferred-size: 33.333%;
flex-basis: 33.333%;
max-width: 33.333%
}
.col-md-5 {
-webkit-flex-basis: 41.667%;
-ms-flex-preferred-size: 41.667%;
flex-basis: 41.667%;
max-width: 41.667%
}
.col-md-6 {
-webkit-flex-basis: 50%;
-ms-flex-preferred-size: 50%;
flex-basis: 50%;
max-width: 50%
}
.col-md-7 {
-webkit-flex-basis: 58.333%;
-ms-flex-preferred-size: 58.333%;
flex-basis: 58.333%;
max-width: 58.333%
}
.col-md-8 {
-webkit-flex-basis: 66.667%;
-ms-flex-preferred-size: 66.667%;
flex-basis: 66.667%;
max-width: 66.667%
}
.col-md-9 {
-webkit-flex-basis: 75%;
-ms-flex-preferred-size: 75%;
flex-basis: 75%;
max-width: 75%
}
.col-md-10 {
-webkit-flex-basis: 83.333%;
-ms-flex-preferred-size: 83.333%;
flex-basis: 83.333%;
max-width: 83.333%
}
.col-md-11 {
-webkit-flex-basis: 91.667%;
-ms-flex-preferred-size: 91.667%;
flex-basis: 91.667%;
max-width: 91.667%
}
.col-md-12 {
-webkit-flex-basis: 100%;
-ms-flex-preferred-size: 100%;
flex-basis: 100%;
max-width: 100%
}
.col-md-offset-1 {
margin-left: 8.333%
}
.col-md-offset-2 {
margin-left: 16.667%
}
.col-md-offset-3 {
margin-left: 25%
}
.col-md-offset-4 {
margin-left: 33.333%
}
.col-md-offset-5 {
margin-left: 41.667%
}
.col-md-offset-6 {
margin-left: 50%
}
.col-md-offset-7 {
margin-left: 58.333%
}
.col-md-offset-8 {
margin-left: 66.667%
}
.col-md-offset-9 {
margin-left: 75%
}
.col-md-offset-10 {
margin-left: 83.333%
}
.col-md-offset-11 {
margin-left: 91.667%
}
.start-md {
-webkit-box-pack: start;
-webkit-justify-content: flex-start;
-ms-flex-pack: start;
justify-content: flex-start;
text-align: start
}
.center-md {
-webkit-box-pack: center;
-webkit-justify-content: center;
-ms-flex-pack: center;
justify-content: center;
text-align: center
}
.end-md {
-webkit-box-pack: end;
-webkit-justify-content: flex-end;
-ms-flex-pack: end;
justify-content: flex-end;
text-align: end
}
.top-md {
-webkit-box-align: start;
-webkit-align-items: flex-start;
-ms-flex-align: start;
align-items: flex-start
}
.middle-md {
-webkit-box-align: center;
-webkit-align-items: center;
-ms-flex-align: center;
align-items: center
}
.bottom-md {
-webkit-box-align: end;
-webkit-align-items: flex-end;
-ms-flex-align: end;
align-items: flex-end
}
.around-md {
-webkit-justify-content: space-around;
-ms-flex-pack: distribute;
justify-content: space-around
}
.between-md {
-webkit-box-pack: justify;
-webkit-justify-content: space-between;
-ms-flex-pack: justify;
justify-content: space-between
}
.first-md {
-webkit-box-ordinal-group: 0;
-webkit-order: -1;
-ms-flex-order: -1;
order: -1
}
.last-md {
-webkit-box-ordinal-group: 2;
-webkit-order: 1;
-ms-flex-order: 1;
order: 1
}
}
.col-sm-6 {background:turquoise;}
<div class="container-fluid">
<div class="row">
<div class="col-sm-6">
<div class="motability-bg">
<img src="/img/new-car-template/motab-bg.jpg" alt="motability seat">
</div>
</div>
<div class="col-sm-6">
<div class="motability-content-bg"></div>
<div class="motability-content">
<h1>Motability</h1>
<p>Hello</p>
</div>
</div>
</div>
</div>