Блог

Главная - Вопросы по программированию - Проблема начальной загрузки 3

Проблема начальной загрузки 3

#html #css #twitter-bootstrap

#HTML #css — код #twitter-bootstrap

Вопрос:

У меня возникли некоторые проблемы с Bootstrap 3

В моем заголовке у меня в настоящее время есть 2 столбца, оба с шириной столбцов 6. Я хотел бы добавить столбец между этими двумя столбцами. Но если я изменю столбец на 4 и добавлю 4 столбца между ними, они появятся в разных строках. Является ли следующее неправильным способом иметь 3 столбца в строке в bootstrap 3?

 <div class="row">
    <div class="col-md-4">
       // Content here
    </div>
    <div class="col-md-4">
       // Content here
    </div>
    <div class="col-md-4">
       // Content here
    </div>
</div>

Это ссылка на сайт, где у меня возникли проблемы. Проблема в моем заголовке, где находится мой логотип

http://www.sevecu.dk/juni14/

Обновление: он работает в Chrome и Safari, но не в Firefox и Explorer

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

Комментарии:

1. Мне это кажется правильным. Единственное предложение, которое у меня есть, — это добавить к ним amp; nbsp;, чтобы посмотреть, поможет ли это дать им немного пространства. Я сталкивался с этой проблемой здесь и там в зависимости от браузеров.

2. Поскольку вы используете значение столбца «md», я должен спросить вас, какое разрешение браузера вы используете. Я также проверил это в Chrome, и я получаю другой рендеринг, чем в FireFox.

3. это должно работать нормально… и выглядит нормально в firefox 30

Ответ №1:

Я смог воспроизвести это, открыв его в IE. Ваши три столбца настроены правильно.

Что вы заметите, так это то, что даже если вы удалите узлы логотипа с помощью отладчика, один из трех всегда будет в правом верхнем углу. Это навело меня на мысль, что выравнивание чего-то над ним неравномерно.

В частности, это, по-видимому, вызвано следующим в template.css :

 p {
  margin: 0 0 10px;
}

Который помещает файл .customphone ниже области, определенной в белом ряду.

Чтобы решить эту проблему, одним из способов было бы сделать:

 p {
  margin: 0;
}

Или, возможно, измените его на .customphone p или создайте свой собственный класс, чтобы вы не влияли на все p

Это решило проблему для меня.

Метки: