Ширина тела HTML изменяется, когда ng-view включает несколько строк в контейнере Bootstrap

Я использовал генератор углов Yeoman для создания приложения AngularJS с Bootstrap.

Когда я использую более определенного количества строк Bootstrap в частичном представлении, ширина тела HTML внезапно становится меньше и отбрасывает выравнивание.

Мне удалось воссоздать проблему, создав приложение с нуля следующим образом:

mkdir mytodo && cd $_
yo angular
? Would you like to use Gulp (experimental) instead of Grunt? No
? Would you like to use Sass (with Compass)? No
? Would you like to include Bootstrap? Yes
? Which modules would you like to include? angular-resource.js, angular-route.js

Если я заменю HTML в about.html на 26 строк Bootstrap, ширина тела HTML составит 1224 пикселя, как и ожидалось:

26 строк Bootstrap в about.html

HTML Body 1224px

Если я затем добавлю еще одну строку, размер тела внезапно уменьшится на 15 пикселей до 1209 пикселей, как показано ниже:

Одна дополнительная строка Bootstrap, всего теперь 27

HTML Body уменьшен до 1209 пикселей

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

Обратите внимание, что «main.css» и весь остальной код точно такой же, как сгенерированный Yeoman, за исключением «about.html».

Различные соответствующие версии: узел v6.4.0; нпм 3.10.6; лет 1.8.4; беседка 1.7.9; хрюканье-cli v1.2.0; хрюканье v0.4.5; Начальная загрузка v3.3.7; УгловойJS v1.5.8


person GeraldScott    schedule 28.08.2016    source источник


Ответы (1)


Я обнаружил, что в коде есть контейнер Bootstrap, вложенный в контейнер-жидкость, что запрещено из-за заполнения и т. д. (см. Bootstrap обсуждение контейнеров).

Я удалил проблемный контейнер, и проблема была решена.

person GeraldScott    schedule 13.03.2017