Div height 100% не работает - bootstrap

Я использую Bootstrap для сетки, у меня возникают проблемы с тем, что col-6 имеет высоту: 100%, чтобы вертикально выровнять внутри него текст.Div height 100% не работает - bootstrap

<div class="row"> 
    <div class="col-lg-6 col-sm-12 center "> 
     <img alt=" " class="img-responsive" src="assets/images/sitewide/mainpageeconomy.jpg"> 
    </div> 
    <div class="col-lg-6 col-sm-12 fillme"> 
     <p>We also offer a 30 foot Grady White center console. She's more of a hardcore no frills fishing vessel, we normally take her 20 to 40 miles offshore for bottom fishing and trolling for game fish up to 4 anglers.</p> 
    </div> 
</div>

класс fillme имеет высоту и мин высоту 100%

помощь очень высокую оценку.

Обновление - я написал blog post об этом! определенно хороший кусок кода, чтобы иметь удобный.

источник

2014-10-22 Mintberry

Правильный ответ Lochemage. Если вы хотите, чтобы '.fillme' был высотой его родителя, вам нужно установить высоту для этого родителя. Добавление '.row {height: 500px;}' будет исправлять эту часть проблемы. – cjspurgeon

Вы можете сделать это, как этот

.col-lg-6 {  
    width: 49% !important; 
    display: inline-block; 
    float: none !important; 
    vertical-align: middle;  
}

источник

2014-10-22 23:21:13

Невероятно, спасибо! Редактировать: Вы можете немного объяснить это? Это должно быть встроенный класс для загрузки! Отличная работа!! – Mintberry

Жаль, что вы не можете использовать .col-lg-6 как «только на больших экранах», он рассматривается как класс;) – Mintberry

Ну, с дисплеем внутристрочного блока и выравнивания по вертикали вы будете иметь как .col- lg-6 div внутри родителя. выровняйте по середине. Высота родителя будет взята из элемента с большей высотой, в вашем случае изображение, а текстовый div будет выровнен по вертикали в доступном пространстве родителя. Мы удаляем поплавок, который добавляется бутстрапом, потому что плавающие элементы не могут быть выровнены по вертикали. –

Процентная высота или ширина, назначенные элементу, будут делать только процентный размер его родительского элемента, а не всего окна браузера. Если родитель не имеет назначенной ему высоты или ширины, дочерние элементы с процентным значением не имеют эффекта.

Убедитесь, что элемент родителя div также содержит значение высоты.

EDIT:

В вашем случае, вы можете использовать положение магии для достижения желаемого результата:

CSS:

.row { 
    margin-right: -15px; 
    margin-left: -15px; 
    position: relative; 
} 

.fillmeright { 
    position: absolute; 
    top: 0px; 
    bottom: 0px; 
    right: 0px; 
} 

.fillmeleft { 
    position: absolute; 
    top: 0px; 
    bottom: 0px; 
    left: 0px; 
}

Просто замените fillme класс с соответствующим fillmeright или fillmeleft ,

источник

2014-10-22 23:15:10 Lochemage

Благодарим за ответ, если я установил высоту, мне пришлось бы корректировать медиа-запросы, было бы лучше использовать js/jquery? – Mintberry

Дайте родительскую строку '.fillme' класс, удалить из Col-LG-6 этого класса и он, как это:

.fillme{ 
    display: flex; 
    align-items: center; 
}

веселит , k

источник

2014-10-22 23:33:24

Div height 100% не работает - bootstrap

ответ

Смежные вопросы