WedX - журнал о программировании и компьютерных науках

Почему это происходит с .row и .container-fluid в начальной загрузке?

Спасибо, что рассмотрели мой вопрос: я пытаюсь создать два ящика с классом .row, и оба они находятся в оболочке .container-fluid. Всякий раз, когда я это делаю, справа появляется странное пространство, я не знаю, является ли это полем, которое добавляет бутстрап, но, насколько я понимаю, .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>

Любое понимание того, почему это происходит, было бы здорово и высоко оценено!

html css twitter-bootstrap
18.07.2016

  • Что произойдет, если вы уберете width:100%; от элементов строки? 19.07.2016
  • container-fluid имеет отступы с обеих сторон, просто у него нет фиксированной ширины: github.com/twbs/bootstrap/blob/master/dist/css/. 19.07.2016
  • @JonSG ДА! большое спасибо! как глупо с моей стороны :D.. Можете ли вы ответить на вопрос, чтобы я мог дать вам чек штуковину. 19.07.2016

Ответы:


1

Как предполагает @Tom, ширина элементов строки «определяется» (через css) для вас как часть пакета. Поэтому, когда кто-то явно устанавливает ширину даже на 100%, они работают против того, что делает загрузчик. Розовая строка должна быть на 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>

18.07.2016

2

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

18.07.2016

3

Попробуйте установить margin для container-fluid:

<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>
18.07.2016
Новые материалы
Как проанализировать работу вашего классификатора?
Не всегда просто знать, какие показатели использовать С развитием глубокого обучения все больше и больше людей учатся обучать свой первый классификатор. Но как только вы закончите..
Работа с цепями Маркова, часть 4 (Машинное обучение)
Нелинейные цепи Маркова с агрегатором и их приложения (arXiv) Автор : Бар Лайт Аннотация: Изучаются свойства подкласса случайных процессов, называемых дискретными нелинейными цепями Маркова..
Crazy Laravel Livewire упростил мне создание электронной коммерции (панель администратора и API) [Часть 3]
Как вы сегодня, ребята? В этой части мы создадим CRUD для данных о продукте. Думаю, в этой части я не буду слишком много делиться теорией, но чаще буду делиться своим кодом. Потому что..
Использование машинного обучения и Python для классификации 1000 сезонов новичков MLB Hitter
Чему может научиться машина, глядя на сезоны новичков 1000 игроков MLB? Это то, что исследует это приложение. В этом процессе мы будем использовать неконтролируемое обучение, чтобы..
Учебные заметки: создание моего первого пакета Node.js
Это мои обучающие заметки, когда я научился создавать свой самый первый пакет Node.js, распространяемый через npm. Оглавление Глоссарий I. Новый пакет 1.1 советы по инициализации..
Забудьте о Matplotlib: улучшите визуализацию данных с помощью умопомрачительных функций Seaborn!
Примечание. Эта запись в блоге предполагает базовое знакомство с Python и концепциями анализа данных. Привет, энтузиасты данных! Добро пожаловать в мой блог, где я расскажу о невероятных..
ИИ в аэрокосмической отрасли
Каждый полет – это шаг вперед к великой мечте. Чтобы это происходило в их собственном темпе, необходима команда астронавтов для погони за космосом и команда технического обслуживания..
Для любых предложений по сайту: [email protected]