Почему это происходит с .row и .container-fluid в бутстрапе?

Спасибо, что посмотрели на мой вопрос: «Я пытаюсь создать две коробки с классом .row, и они оба находятся в упаковке .container-fluid. Всякий раз, когда я это делаю, есть странное пространство справа, я не знаю, добавляет ли это добавочный ботстрап, но из того, что я понимаю. Контейнер-флюид должен быть полноэкранным?Почему это происходит с .row и .container-fluid в бутстрапе?

две коробки имеют желтый цвет и белый, контейнер-жидкость розовый/пурпурный.

КОД:

<div class="container-fluid"> 
<div class="row" style="background-color: #EFF3CD; width:100%; height:350px;"></div> 

<div class="row" style="background-color: #FFF; width:100%; height:350px;"></div> 
</div>

Любые идеи в почему это происходит будет большой и высоко оценили!

источник

2016-07-18 Bodil132

Что произойдет, если вы берете ** ширина: 100%; ** от элементов строки? – JonSG

контейнер-жидкость имеет прокладку с обеих сторон, у нее просто нет фиксированной ширины: https://github.com/twbs/bootstrap/blob/master/dist/css/bootstrap.css#L1605. –

@JONSG ДА! спасибо, много! как тупой из меня: D .. Можете ли вы ответить на вопрос, чтобы я мог дать вам чек. – Bodil132

Как @Tom предлагает, чтобы ширина элементов строки была «определена» (через css) для вас как часть пакета. Поэтому, когда вы задаете ширину явно даже до 100%, они работают против того, что делает bootstrap. Розовый ряд - это на 30 пикселей шире синего. Я считаю, что это было бы справедливо даже без загрузочного javascript, но я добавил его для полноты.

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous"> 
 

 
<div class="container-fluid"> 
 
    <div class="row" style="background-color: aliceblue; width:100%; height:50px;"></div> 
 
    <div class="row" style="background-color: mistyrose; height:50px;"></div> 
 
    <div class="row" style="background-color: aliceblue; width:100%; height:50px;"></div> 
 
</div> 
 

 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>

источник

2016-07-18 23:36:20 JonSG

запас установки Try для контейнера-жидкости:

<div class="container-fluid" style="margin: 0 auto;"> 
<div class="row" style="background-color: #EFF3CD; width:100%; height:350px;"></div> 

<div class="row" style="background-color: #FFF; width:100%; height:350px;"></div> 
</div>

источник

2016-07-18 22:25:22 Imphusius

Попробуйте удалить вашу width: 100% собственности от .row. Этого класса уже устанавливает левый и правый края, который выглядит, почему вы с этой проблемой. Если вы посмотрите на него в инспекторе своего браузера, он должен показать вам, как поля нарисованы визуально.

источник

2016-07-18 22:34:05

Почему это происходит с .row и .container-fluid в бутстрапе?

ответ

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