)С CSS для intro-bodyвроде так (" />

контейнер-жидкость в Bootstrap 3.4 не растягивается горизонтально 100%

javascript html css twitter-bootstrap

650 просмотра

2 ответа

У меня та же проблема, что и в предыдущем вопросе: div не расширяется по горизонтали

Все, что я имею в своей render()функции

render() {
    return (
        <div className="container intro-body">
        </div>
    )

С CSS для intro-bodyвроде так (для цвета)

.intro-body {
    height: 582px;
    background-color: #3BC5C3;
}

На полноэкранном режиме на 13-дюймовом Macbook левая и правая стороны - это пробелы. Кажется, что есть отступы или какое-то поле.

введите описание изображения здесь

Но когда я сужаю свое окно примерно до половины размера, оно достигает левой и правой сторон

введите описание изображения здесь

Может кто-нибудь объяснить это странное явление? Это что-то в Bootstrap, о котором я не знаю? Мне сказали использовать, container-fluidно 1. Я думаю, что это удалено в Bootstrap 3 и 2. Это не сработало, когда я попробовал.

Автор: patrickhuang94 Источник Размещён: 08.11.2019 11:03

Ответы (2)


3 плюса

Решение

Если вы посмотрите на источник начальной загрузки, вы увидите, что он .containerимеет фиксированную ширину для каждой точки прерывания мультимедиа, за исключением очень маленьких устройств, и .container-fluidимеет полную ширину для всех точек прерывания мультимедиа:

.container {
    padding-right: 15px;
    padding-left: 15px;
    margin-right: auto;
    margin-left: auto;
}
@media (min-width: 768px) {
    .container {
        width: 750px;
    }
}
@media (min-width: 992px) {
    .container {
        width: 970px;
    }
}
@media (min-width: 1200px) {
    .container {
        width: 1170px;
    }
}
.container-fluid {
    padding-right: 15px;
    padding-left: 15px;
    margin-right: auto;
    margin-left: auto;
}

Поэтому, если вы хотите иметь полную пропускную способность для каждой точки останова, используйте .container-fluid.

Автор: Vucko Размещён: 20.08.2016 08:15

0 плюса

Перво-наперво: вы должны поставить ссылку css для сброса (она должна быть первой). Вы можете найти его здесь: http://meyerweb.com/eric/tools/css/reset/ тогда, если вы хотите, чтобы контейнер соответствовал общей ширине элемента div, он должен быть контейнером-флюидом

Автор: Nathan Schwarz Размещён: 20.08.2016 08:45
Вопросы из категории :
32x32