IE8 проблема с Twitter Bootstrap 3
Я создаю сайт, используя новый Bootstrap Twitter. Сайт отлично выглядит и работает во всех необходимых браузерах, кроме IE8.
В IE8 он, похоже, отображает элементы мобильной версии, но растягивается по всему экрану моего рабочего стола. Я считаю, что проблема, с которой я столкнулась, заключается в том, что загрузочный лоток Twitter сначала мобилен. Поэтому по какой-то причине IE8 собирается для этого варианта.
Я также замечаю, что класс container, по-видимому, не тянет в свойствах максимальной ширины CSS, как предполагалось. Может ли кто-нибудь увидеть, что я сделал неправильно?
<!-- Favicon -->
<link rel="shortcut icon" href="/favicon.ico">
<link rel="apple-touch-icon" href="/apple-touch-icon.png">
<!-- Bootstrap -->
<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0-rc1/css/bootstrap.css" rel="stylesheet">
<link href="//netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.min.css" rel="stylesheet">
<script src="/SiteFiles/js/modernizr.js"></script>
<!-- CSS -->
<link href="/SiteFiles/css/main.css" rel="stylesheet">
<header>
<div class="topArea clearfix">
<div class="container">
<div class="topLinks">
<div class="btn-group">
<span class="flag" data-toggle="dropdown"> </span>
<ul class="dropdown-menu">
<li><a href="#">Country 1</a></li>
<li><a href="#">Country 2</a></li>
<li><a href="#">Country 3</a></li>
<li class="divider"></li>
<li><a href="#">Country 4</a></li>
<li><a href="#">Country 5</a></li>
<li><a href="#">Country 6</a></li>
</ul>
</div>
<div class="visible-sm btn-group">
<div class="plus" data-toggle="dropdown"><i class="icon-plus icon-2x"> </i></div>
<ul class="dropdown-menu">
<li><a href="#">Parts & Service</a></li>
<li><a href="#">Store Locator</a></li>
<li><a href="#">Find a Service Centre</a></li>
<li><a href="#">Parts List</a></li>
<li><a href="#">Tool Vibration</a></li>
<li><a href="#">Resource Centre</a></li>
<li><a href="#">Media Centre</a></li>
<li><a href="#">Register your Tools</a></li>
<li><a href="#">About Us</a></li>
<li><a href="#">
<button type="button" class="btn btn-default">Where to Buy</button></a></li>
</ul>
</div>
<div class="topNav">
<ul class="hidden-sm">
<li>
<div class="btn-group">
<a href="#" data-toggle="dropdown">Parts & Service</a>
<ul class="dropdown-menu">
<li><a href="#">Store Locator</a></li>
<li><a href="#">Find a Service Centre</a></li>
<li><a href="#">Parts List</a></li>
<li><a href="#">Tool Vibration</a></li>
</ul>
</div>
</li>
<li><a href="#">Resource Centre</a></li>
<li><a href="#">Media Centre</a></li>
<li><a href="#">Register your Tools</a></li>
<li><a href="#">About Us</a></li>
<li><a href="#">
<button type="button" class="btn btn-default">Where to Buy</button></a></li>
</ul>
</div>
<div class="searchArea">
<input type="text" />
<a href="#" class="goBtn">GO</a>
</div>
</div>
</div>
</div>
<div class="mainNavArea">
<div class="container rel">
<div class="logo">
<img src="/SiteFiles/img/logo.png" title="Milwaukee - Nothing but heavy duty" alt="Milwaukee - Nothing but heavy duty" />
</div>
<div class="navi">
<div class="navbar">
<div class="container">
<!-- .navbar-toggle is used as the toggle for collapsed navbar content -->
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-responsive-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<!-- Place everything within .navbar-collapse to hide it until above 768px -->
<div class="nav-collapse collapse navbar-responsive-collapse">
<ul class="nav nav-justified">
<li><span class="dropArrow"> </span><span class="topNavPosition">Power Tools</span>
<div class="navDrop">
<div class="navDropInner">
<div class="row">
<div class="hidden-sm col-sm-4 col-lg-4">
<img src="/SiteFiles/img/drill.jpg" alt="" />
</div>
<div class="col-12 col-sm-8 col-lg-8">
<h2>Power Tools</h2>
<div class="row">
<div class="col-6 col-sm-6 col-lg-6">
<a href="#">Cutters</a>
<a href="#">Levels</a>
<a href="#">Pliers</a>
<a href="#">Saws</a>
<a href="#">Screwdrivers</a>
</div>
<div class="col-6 col-sm-6 col-lg-6">
<a href="#">Snips</a>
<a href="#">Utility Knives</a>
<a href="#">Combo Knives</a>
<a href="#">Hand Tool Accessories</a>
</div>
</div>
</div>
</div>
</div>
<a href="#" class="closeNav">X</a>
</div>
</li>
<li><span class="dropArrow"> </span><span class="topNavPosition">Hand Tools</span>
<div class="navDrop">
<div class="navDropInner">
<div class="row">
<div class="hidden-sm col-sm-4 col-lg-4">
<img src="/SiteFiles/img/drill.jpg" alt="" />
</div>
<div class="col-12 col-sm-8 col-lg-8">
<h2>Hand Tools</h2>
<div class="row">
<div class="col-6 col-sm-6 col-lg-6">
<a href="#">Cutters</a>
<a href="#">Levels</a>
<a href="#">Pliers</a>
<a href="#">Saws</a>
<a href="#">Screwdrivers</a>
</div>
<div class="col-6 col-sm-6 col-lg-6">
<a href="#">Snips</a>
<a href="#">Utility Knives</a>
<a href="#">Combo Knives</a>
<a href="#">Hand Tool Accessories</a>
</div>
</div>
</div>
</div>
</div>
<a href="#" class="closeNav">X</a>
</div>
</li>
<li><span class="dropArrow"> </span><span class="topNavPosition">Test & Measurement</span>
<div class="navDrop">
<div class="navDropInner">
<div class="row">
<div class="hidden-sm col-sm-4 col-lg-4">
<img src="/SiteFiles/img/drill.jpg" alt="" />
</div>
<div class="col-12 col-sm-8 col-lg-8">
<h2>Test & Measurement</h2>
<div class="row">
<div class="col-6 col-sm-6 col-lg-6">
<a href="#">Cutters</a>
<a href="#">Levels</a>
<a href="#">Pliers</a>
<a href="#">Saws</a>
<a href="#">Screwdrivers</a>
</div>
<div class="col-6 col-sm-6 col-lg-6">
<a href="#">Snips</a>
<a href="#">Utility Knives</a>
<a href="#">Combo Knives</a>
<a href="#">Hand Tool Accessories</a>
</div>
</div>
</div>
</div>
</div>
<a href="#" class="closeNav">X</a>
</div>
</li>
<li><span class="dropArrow"> </span><span class="topNavPosition">Accessories</span>
<div class="navDrop">
<div class="navDropInner">
<div class="row">
<div class="hidden-sm col-sm-4 col-lg-4">
<img src="/SiteFiles/img/drill.jpg" alt="" />
</div>
<div class="col-12 col-sm-8 col-lg-8">
<h2>Accessories</h2>
<div class="row">
<div class="col-6 col-sm-6 col-lg-6">
<a href="#">Cutters</a>
<a href="#">Levels</a>
<a href="#">Pliers</a>
<a href="#">Saws</a>
<a href="#">Screwdrivers</a>
</div>
<div class="col-6 col-sm-6 col-lg-6">
<a href="#">Snips</a>
<a href="#">Utility Knives</a>
<a href="#">Combo Knives</a>
<a href="#">Hand Tool Accessories</a>
</div>
</div>
</div>
</div>
</div>
<a href="#" class="closeNav">X</a>
</div>
</li>
</ul>
</div>
<!-- /.nav-collapse -->
</div>
<!-- /.container -->
</div>
<!-- /.navbar -->
</div>
</div>
</div>
</header>
-
1Добро пожаловать. Пожалуйста, отправьте код в вопросе, а также. Это поможет любому, кто будет смотреть на этот вопрос в последующие годы, когда ваша ссылка больше не работает.Mark Chorley
-
1Спасибо! Я редактировал это сейчас, ура.wrayvon
22 ответа
Вы получили свой CSS от CDN (bootstrapcdn.com). response.js работает только для локальных файлов. Поэтому попробуйте свой веб-сайт на IE8 с локальной копией bootstrap.css. Или читайте: Настройка CDN/X-домена
Примечание См. также: https://github.com/scottjehl/Respond/pull/206
Update:
Пожалуйста, прочитайте: http://getbootstrap.com/getting-started/#support
Кроме того, Internet Explorer 8 требует использования response.js для поддержки поддержки медиа-запросов.
Смотрите также: https://github.com/scottjehl/Respond
По этой причине основной шаблон содержит эти строки в разделе главы:
<!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!--[if lt IE 9]>
<script src="../../assets/js/html5shiv.js"></script>
<script src="../../assets/js/respond.min.js"></script>
<![endif]-->
-
0Пожалуйста, прости меня, если я тупой ... но
respond.js -
6Извиняюсь, я всегда, кажется, нахожу подходящее решение после публикации нелепых вопросов ... проверьте getbootstrap.com/getting-started (особенно в разделе «Internet Explorer 8 и 9»). :)
Мне также пришлось установить следующий тег META:
<meta http-equiv="X-UA-Compatible" content="IE=edge">
-
0Я использую:
<div class="left-finger-picker img-responsive">чтобы показать изображение, где:left-finger-pickerвыглядит следующим образом:.left-finger-picker { width: 200px; height: 210px; position : relative; background-size: cover; background-image : url("../myPics/leftHand.png"); background-repeat: no-repeat; background-size: contain; }однако, это не отзывчиво в IE8
У меня возникла такая же проблема при переходе с Bootstrap 2 на 3. У меня уже были answer.js и html5shiv.js, и я поставил свою мета на край. Я пропустил это от 2 до 3, тип элемента навигационной панели изменился. В Bootstrap 2 это был nav. В Bootstrap 3 теперь заголовок. Чтобы полностью решить проблему, я должен был
<meta http-equiv="X-UA-Compatible" content="IE=edge">
Положите это сразу после загрузки моего css:
<!--[if lt IE 9]>
<script src="~/Content/compatibility/html5shiv.js"></script>
<script src="~/Content/compatibility/respond.min.js"></script>
<![endif]-->
а затем измените
<nav class="navbar" role="navigation">
</nav>
к
<header class="navbar" role="navigation">
</header>
О, и для хорошей меры я также добавил
<meta name="viewport" content="width=device-width, initial-scale=1.0">
просто потому, что сам сайт Bootstrap имеет.
-
0Я использую:
<div class="left-finger-picker img-responsive">чтобы показать изображение, где:left-finger-pickerвыглядит следующим образом:.left-finger-picker { width: 200px; height: 210px; position : relative; background-size: cover; background-image : url("../myPics/leftHand.png"); background-repeat: no-repeat; background-size: contain; }однако, это не отзывчиво в IE8
В моем случае ошибка, вызванная бутстрапом, вызвала проблему. Чтобы сделать bootstrap 3.0.2 отзывчивым в IE8 (эмулированный с помощью инструментов разработчика F12), мне пришлось:
1 - Установите флаг X-UA-Compatible.
<meta http-equiv="X-UA-Compatible" content="IE=edge">
2 - используйте notminified bootstrap.css вместо bootstrap.min.css
<link href="/css/bootstrap.css" rel="stylesheet" />
3 - Добавьте response.js(и html5shiv.js)
<!--[if lt IE 9]>
<script src="/js/html5shiv.min.js"></script>
<script src="/js/respond.min.js"></script>
<![endif]-->
-
0В моем случае также проблема с миниатюрным загрузчиком CSS вызывала проблему в IE8.
-
0Я использую:
<div class="left-finger-picker img-responsive">чтобы показать изображение, где:left-finger-pickerвыглядит следующим образом:.left-finger-picker { width: 200px; height: 210px; position : relative; background-size: cover; background-image : url("../myPics/leftHand.png"); background-repeat: no-repeat; background-size: contain; }однако, это не отзывчиво в IE8
На всякий случай. Убедитесь, что вы загрузите специфические js файлы IE после загрузки ваших файлов css.
поместите respond.js в нижней части страницы, но перед закрытием тега body и вот ссылка respond.js и запустите этот код в своем локальном хосте.
-
0Спасибо за это, забыл упомянуть, хотя, это уже включено в мой файл plugins.js.
-
0Важно то, что
respond.jsдолжен быть загружен после таблиц стилей.
Как было сказано ранее, существуют две разные проблемы: 1) IE8 не поддерживает медиа-запросы 2) response.js, используемый в сочетании с междоменными css файлами, должен быть включен, как описано ранее.
Если вы хотите использовать BootstrapCDN здесь рабочий пример:
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css">
<!--[if lt IE 9]>
<link href="//netdna.bootstrapcdn.com/respond-proxy.html" id="respond-proxy" rel="respond-proxy" />
<link href="img/ie/respond.proxy.gif" id="respond-redirect" rel="respond-redirect" />
<script src="js/ie/html5shiv.js"></script>
<script src="js/ie/respond.min.js"></script>
<script src="js/ie/respond.proxy.js"></script>
<![endif]-->
Также обязательно скопируйте response.proxy.gif, reply.min.js и response.proxy.js в локальных каталогах
Не забудьте поместить ваши ссылки css в <head>, поскольку respond.js принимает только те.
После проверки:
- DOCTYPE
- X-UA-совместимый метатег
- Включение html5shiv.js и response.js(и загрузка последних версий)
- response.js является локальным
- Хостинг сайта с веб-сервера, а не из файла://
- Не использовать @import
- ...
Все еще col-lg, col-md и col-sm не работали. Наконец, я переместил ссылки на бутстрап, чтобы быть перед ссылками на html5shiv.js и response.js, и все это сработало.
Вот фрагмент:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>Bootstrap Test for IE8</title>
<!-- Moved these two lines up -->
<link href="includes/css/bootstrap.css" type="text/css" rel="stylesheet" />
<script src="includes/js/bootstrap.js"></script>
<!--[if lt IE 9]>
<script src="includes/js/html5shiv.js"></script>
<script src="includes/js/respond.min.js"></script>
<![endif]-->
</head>
<body>
<div class="container">
<div class="row">
<div class="col-md-4" style="background-color:red;">col-md-4</div>
<div class="col-md-8" style="background-color:green;">col-md-8</div>
</div>
</div>
</body>
</html>
-
2Перемещение bootstrap.min.css, как рекомендовано здесь, было необходимо для решения моей проблемы. Я только переместил файл .css, файл .js все еще загружается после.
-
0Перемещение моего скомпилированного файла CSS (включая Bootstrap) выше html5shim и ответа было решением для меня - спасибо
Из объяснения говорится, что IE8 является стандартной версией для вас, а content="IE=edge" отобразит страницу в самом высоком режиме. Чтобы сделать его совместимым, измените его на content="IE=8".
Режим IE8 поддерживает множество установленных стандартов, в том числе спецификации каскадных таблиц стилей W3C уровня 2.1 и API-интерфейсы W3C; он также обеспечивает ограниченную поддержку каскадных таблиц стилей W3C уровня 3 (рабочий проект) и других новых стандартов.
Режим Edge указывает Internet Explorer отображать содержимое в доступном режиме. В Internet Explorer 9 это эквивалентно режиму IE9. Если будущий выпуск Internet Explorer поддерживает более высокий режим совместимости, страницы, установленные в режиме edge, будут отображаться в самом высоком режиме, поддерживаемом этой версией. Те же самые страницы будут отображаться в режиме IE9 при просмотре в Internet Explorer 9.
Ссылка Что такое < meta http-equiv = "X-UA-Compatible" content= ", IE = край " > делать?
Необходимо добавить - <meta http-equiv="X-UA-Compatible" content="IE=edge">
Я использовал Bootstrap 3 - работал ли он над IE на моем локальном компьютере.
Я сказал, что он не работает в IE.
Just Bootstrap не включает эту строку кода в свои шаблоны, я не уверен, почему, но это может быть связано с тем, что она не совместима с W3C.
У меня есть исправление для этой проблемы. На самом деле IE7 и 8 не поддерживают @media правильно, и если вы проверите css для классов "col-md- *", и ширина будет указана в ширине носителя 992px. Просто создайте новый css файл IE, например: IE.css, и добавьте условные комментарии. А затем просто скопируйте классы, необходимые для вашего дизайна, непосредственно с любыми запросами на медиа-носители, и вы закончили.
Я столкнулся с той же проблемой, попробовал первый ответ, но чего-то не хватало.
Если вы, ребята, используете Webpack, ваш css будет загружен как тег стиля, который не поддерживается response.js, ему нужен файл, поэтому убедитесь, что bootstrap загружен как файл css
Лично я использовал extract-text-webpack-plugin
const webpack = require("webpack")
const ExtractTextPlugin = require("extract-text-webpack-plugin")
const path = require("path")
module.exports = {
context: __dirname+"/src",
entry: "./index.js",
output: {
filename: "./dist/bundle.js",
path: __dirname
},
plugins: [
...,
new ExtractTextPlugin("./dist/bootstrap.css", {
allChunks: true
})
],
module: {
loaders: [
...,
// your css loader excluding bootstrap
{
test: /\.css$/,
loader: "style!css",
exclude: [
path.resolve(__dirname, "node_modules/bootstrap/dist/css/bootstrap.css")
]
},
{
// loads bootstrap as a file, change path accordingly if needs be, path needs to be absolute
include: [
path.resolve(__dirname, "node_modules/bootstrap/dist/css/bootstrap.css")
],
loader: ExtractTextPlugin.extract("style-loader", "css-loader?minimize")
}
]
}
}
Надеюсь, это поможет вам.
Убедитесь, что вы связали источник начальной загрузки
Если вы используете LESS или SASS, не следует жадно компилировать стили.
В моем проекте я включил bootstrap.min.css в мой основной стиль, в верхней части файла, поэтому должен быть только один запрос для всех стилей.
И из-за этого классы boostrap не работали должным образом. При добавлении отдельно, работает как ожидалось.
Используйте это решение
<!--[if lt IE 9]>
<script src="js/css3-mediaqueries.js"></script>
<link rel="stylesheet" type="text/css" href="css/bootstrap-ie7.css" />
<![endif]-->
Эта строка <script src="js/css3-mediaqueries.js"></script> включает медиа-запросы.
Эта строка <link rel="stylesheet" type="text/css" href="css/bootstrap-ie7.css" /> включает бутстрап-шрифты.
Проверено на Bootstrap 3.3.5
Ссылка на скачивание mediaqieries.js. Ссылка для скачивания bootstrap-ie7.css
-
0страница становится пустой.
Я решил выполнить следующие шаги.
(1) установлен модуль Respond.js для drupal 7.
(2) модуль lessphp для drupal 7, установленный в библиотеках, а не в папке с модулем.
(3)
(3.1) <meta http-equiv="X-UA-Compatible" content="IE=edge">
(3.2)
<!--[if lt IE 9]>
<script src="js/html5shiv.js"></script>
<![endif]-->
используя cdn bootstrap из настройки темы.
Чтобы узнать больше, просмотрите мой блог на сайте для дизайна и развития drupal www.devangsolanki.com
-
1Как шаги 1 и 2 даже связаны с вопросом? Проблема с IE8 и начальной загрузкой. Drupal даже не упоминается в этом вопросе.
Так же, как хедз-ап. У меня была та же проблема, и ни одна из вышеперечисленных не исправила это для меня. В конце концов я узнал, что response.js не анализирует CSS, на который ссылается @import. У меня было все bootstrap.min.css импортировано через @import в мой main.css.
Поэтому убедитесь, что у вас нет CSS, который содержит ваши медиа-запросы, на которые ссылаются через @import.
Если вы используете Bootstrap 3, и все работает отлично в других браузерах, кроме IE, попробуйте ниже.
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
<script src="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script>
<![endif]-->
-
0Привет, Фил Хили, решение, которое я разместил, сработало для меня. Ваш комментарий не является конструктивным. Вы должны предоставить более подробную информацию, если вы хотите помочь
-
1@vutbao bootstrap работает на версиях> IE8. Если вы хотите, чтобы он работал в IE8, вам необходимо добавить ответ, НО repondjs НЕ РАБОТАЕТ, если вы используете загрузочную CDN. найдите время, чтобы прочитать ответ Бас Йобсен.
Я прочитал каждый комментарий здесь, попробовал все.. но не смог заставить его работать с Windows 7 - Internet Explorer 11 (с режимом документа: IE8).
Затем пришло в голову, что запуск режима документа (IE8) не совпадает с реальным IE8, поэтому я установил Windows Virtual PC (Windows 7 с Internet Explorer 8) и tadaaaa... он работает как шарм!
Я поставил этот фрагмент кода JUST в нижней части страницы, чтобы он работал:
<!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
<script src="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script>
<![endif]-->
</body>
</html>
-
0Respond.js и прокси-файлы также размещены на cdnjs.cloudflare.com. проверьте cdnjs.com/libraries/respond.js для документов / ссылок, и там также размещен загрузчик 3.03: cdnjs.com/libraries/twitter-bootstrap
мой тег заголовка выглядит следующим образом:
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<!-- Bootstrap core CSS -->
<link href="css/modern-business.css" rel="stylesheet">
<link href="font-awesome/css/font-awesome.min.css" rel="stylesheet">
<link href="css/bootstrap.css" rel="stylesheet" media="screen">
<script src="js/jquery.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/modern-business.js"></script>
<!--[if lt IE 9]>
<script src="js/html5shiv.js"></script>
<script src="js/respond.js"></script>
<![endif]-->
</head>
если вы хотите попробовать локально... попробуйте через localhost или создайте сервер QA и настройте контент и попробуйте.
Нам нужен response.js для bootstrap 3, и он не будет работать на локальной машине, если мы просто поместим его в js и добавим его в html в заголовке. Он скажет, что доступ запрещен. он работает только через сервер, поскольку IE имеет ограничение безопасности.: P
У меня такая же проблема в IE 10.0. Я знаю, что это не совсем проблема в OP, но, возможно, это будет полезно для других.
В моем случае у меня была пустая строка в начале документа:
[blank line]
<!DOCTYPE html>
<html lang="es">
...
Если пустая строка находится между DOCTYPE и тегом, проблема также отображается:
<!DOCTYPE html>
[blank line]
<html lang="es">
Как только я удалил пустую строку и без волшебной X-UA-совместимой мета, IE 10 начал правильно отображать сайт.
Если вы используете PHP и Smarty, будьте осторожны с комментариями Smarty, потому что они добавят эти проблемные пустые строки: -)
У меня была точно такая же проблема при переходе с bootstrapv2 на v3.
Если (как я) вы перенести, заменив старый spanX на col-sm-X, вам также нужно добавить классы col-X. col-X - это стили, которые находятся вне любых блоков @media, поэтому они работают без поддержки медиа-запросов.
Чтобы исправить ширину контейнера, вы можете установить ее вне блока @media. Что-то вроде:
.container {
max-width: @container-tablet;
}
@import "twitter-bootstrap/less/bootstrap";
-
0Итак, выяснилось, что это не решает проблему на 100%, поскольку классы col-X затем используются для мобильных устройств. Вернуться к доске для рисования...
-
0Классы col-X никогда не будут складываться, поэтому у вас будут проблемы на небольших устройствах. Вы также не решаете проблемы с @ grid-float-breakpoint, которая также зависит от медиа-запросов, поэтому ваша навигационная панель не станет горизонтальной. Смотрите также: stackoverflow.com/a/17920693/1596547
Ещё вопросы
- 1Сценарий Python, который перемещает определенные файлы между сегментами S3
- 1Проблема оптимизации колонии муравьев
- 1Как вывести тип аргумента? расширяет класс в объявлении интерфейса
- 0Матричный шаблон C ++, неоднозначность между умножением матрицы на матрицу и числом матриц
- 1Ошибка при использовании статического метода с навесным декоратором
- 1Разбор HTML тега div с помощью Jsoup
- 1Строковый параметр слишком длинный. извлечение данных из базы данных в шаблон слова
- 0Java - Spring Boot - Mysql / Java - Получить тип транспортного средства из столбца таблицы и получить их общее количество (КОЛИЧЕСТВО) из другой таблицы
- 1MVC Paging не работает в AJAX-форме
- 1Как создать объект в Form1 из другого класса?
- 0Mysql phpmyadmin показать пустую мощность
- 0Захватить jQuery Маскированный ввод Изменение ввода
- 0Как скрыть столбцы с помощью HTML
- 1Как передать больше параметров в метод Spring Spring
- 1Recycler view не отвечает на клики
- 1Строки в pandas.Series всегда меньше 0?
- 1Пользовательские функции Pandas в возвращении значений столбцов
- 0Как экспортировать DataTable в Excel с выбранным столбцом
- 0Не удается подключиться к серверу MySQL (LAMP) в облаке Google
- 0Одинаковый интерфейс Ionic Framework для мобильных и не мобильных браузеров?
- 0Как вставить новую строку в таблицу через angularjs?
- 0Назначение из std :: make_shared в std :: shared_ptr завершается неудачно? (VS2012 Bug)
- 0Зависание обоих элементов гнезда
- 0Safari 6 выпуск с максимальной шириной на столах
- 0Странное поведение Angular 1.3 при копировании элемента в NG-повтор
- 0Скрыть один элемент и показать другой при наведении
- 1Угловая труба: невозможно заменить / n
- 0JQuery, нажмите, чтобы увеличить изображение, затем нажмите Agian, чтобы вернуться к предыдущей ширине
- 0Сборка PreparedStatement в Java с переменным числом столбцов для вставки данных в базу данных [дубликаты]
- 1Является ли откладывание проблем безопасности до конца цикла разработки приложений хорошим подходом?
- 1Возможно ли, что getInstallerPackageName () имеет значение null, когда приложение загружено из Google Play Store?
- 0По умолчанию работает только для 8 и 9. После этого он использует первое число и обрабатывает его как 1,2,3
- 1Пропустить конвертацию сущностей при загрузке строки yaml (используя PyYAML)
- 1Windows Phone - любой шаблон дизайна формы?
- 0Redshift - SQL Left Join не работает с коррелированным подзапросом и агрегированной функцией
- 0Как преобразовать текстовые журналы в HTML-журналы в C #? [Дубликат]
- 1Модульная экспонента в Java (алгоритм дает неправильный ответ)
- 1Как я могу вычесть и суммировать результаты всех массивов в массиве
- 0С FTP на Bitbucket / Dropbox / Box
- 0Итерация по векторному столбцу C ++
- 0Как использовать функцию PHP crypt () со строкой соли SHA256 для генерации того же хеша, который генерировался бы, если бы SHA256 не поддерживался на сервере?
- 1Как замаскировать личную информацию, используя любой язык, например, Java?
- 0Сложный SQL-запрос с переменными
- 1Как получить имя целевой функции из склеарна `Bunch`
- 0AngularJS Routing с несколькими атрибутами URL
- 1ARIMA PREDICT не прогнозирует (но работает для Hindcasting)
- 1Canvas неправильно рисует край при извлечении изображения из спрайта
- 0Ошибка при вставке записи. Невозможно добавить или обновить дочернюю строку: ограничение внешнего ключа не выполнено
- 0Проблема с перенаправлением страницы контактов
- 1Моя программа зачетных книжек не печатает должным образом, чтобы превзойти документ
