2014-01-10 2 views
3

Я использую Twitter Bootstrap для сайта. Я пытаюсь получить контент в центре. Традиционно я бы просто создать пользовательский .container класс, который выглядит следующим образом:Twitter Содержимое бутстрапа в контейнере не центрировано

.container { 
    width: 70%; 
    max-width: 1024px; 
    margin: 0 auto; 
} 

Я попытался переопределить этот класс вручную, но только ширина, кажется, делает разницу. Я размещаю содержимое внутри контейнера следующим образом:

<div class="container> 
    <div ng-view></div> 
</div>  

Контейнер сам по себе центрирован. Но содержание внутри, похоже, имеет левое поле/дополнение. Любые идеи о том, как я должен структурировать свои div?

Update Я использую Bootstrap v3.0.3

ответ

4

Я бы придерживаться подмостей здесь, если бы я тебя , который сохраняет его отзывчивым, чистым & встроенным с остальной частью ожидаемого HTML-бутстрапа. Я покажу пример Bootstrap 3.0.0 ниже (Как вы не упоминали номер версии)

<div class="container"> 
    <div class="row"> 
     <div ng-view class="col-xs-2"></div> 
     <div ng-view class="col-xs-8 content">Centre</div> 
     <div ng-view class="col-xs-2"></div> 
    </div> 
</div> 

Bootply Demo

+0

Я использую 'Bootstrap v3.0.3 (http://getbootstrap.com)' – Anders

+0

'v3.0.3' не должен быть слишком разным в отношении имен классов, так что это нормально там =) – MackieeE

+0

Я пробовал ваш ответ - кажется, работает, но содержание становится для меня довольно узким. Есть ли у вас идеи о том, что может это сделать? – Anders

0

Попробуйте это:

.container 
{ 
    width: 0%; 
    max-width: 1024px; 
    margin: 0 auto; 
    text-align: center; 
} 
0

Вы пробовали что-нибудь вроде:

.container > div{ 
    padding-left: 0; 
    margin-left: 0; 
} 
0

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

<div ng-view></div> 

к:

<ng-view></ng-view> 

и вдруг все стали вести себя я ожидал. Не уверен, почему использование элемента ng-view, а не атрибута ng-view, помогло, но это так!

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