0
При первом запуске flexboxgrid из окна в моем разрешении x66 v46 1366 созданное мной меню выборки будет располагаться вертикально, а не горизонтально, так как должна быть гибкая макет. Однако, когда вы пытаетесь выполнить код в jsfiddle, похоже, все в порядке. Я полагаю, что это имеет какое-то отношение к ширине контейнера? Как мне это исправить?Контейнер с сеткой Flexbox
Вот fiddle:
HTML:
<div class="container">
<div class="row center-xs middle-xs">
<div class="col-sm-2 col-xs-4">
<h1><a href="#">My Logo</a></h1>
</div>
<div class="col-sm-8 col-sm-offset-2 col-xs-12">
<nav>
<ul class="row">
<li class="col-xs"><a href="#">Home</a>
</li>
<li class="col-xs"><a href="#">About</a>
</li>
<li class="col-xs"><a href="#">Menu</a>
</li>
<li class="col-xs"><a href="#">News</a>
</li>
<li class="col-xs"><a href="#">Photo</a>
</li>
</ul>
</nav>
</div>
</div>
<!--end of .row-->
<h2>A flexible menu based on the
<a href="http://flexboxgrid.com/" target="_blank">Flexbox Grid</a> framework.
</h2>
<p class="p">Demo by George Martsoukos. <a href="http://www.sitepoint.com/3-modern-tools-using-flexbox-grids" target="_blank">See article</a>.</p>
</div>
CSS:
body {
/* display: flex;*/
/* flex-direction: column;*/
background: #4c493e;
color: white;
padding-top: 10px;
}
h1, ul, li {
padding: 0;
margin: 0;
}
li {
list-style: none;
}
a {
color: black;
text-decoration: none;
}
.p {
text-align: center;
color: white;
padding-top: 150px;
font-size: .9em;
}
.p a {
color: white;
text-decoration: underline;
}
/* LOGO STYLES
–––––––––––––––––––––––––––––––––––––––––––––––––– */
h1 {
margin-left: 5px;
padding: 10px;
font-size: 24px;
background: #ffee91;
}
h1 a {
display: block;
}
/* MENU STYLES
–––––––––––––––––––––––––––––––––––––––––––––––––– */
div.row {
min-height: 80px;
padding-left: 20px;
padding-right: 20px;
margin: 0;
}
.col-xs {
padding: 0;
border-right: solid 1px #444;
}
nav {
margin-right: 5px;
}
ul a {
display: block;
padding: 15px 0;
text-transform: uppercase;
background: #fff0a0;
transition: background .3s ease;
}
ul a:before {
font-family: FontAwesome;
padding-right: 5px;
font-size: 22px;
display: inline-block;
}
ul li:nth-child(1) a:before {
content:'\f015';
}
ul li:nth-child(2) a:before {
content:'\f0eb';
}
ul li:nth-child(3) a:before {
content:'\f115';
}
ul li:nth-child(4) a:before {
content:'\f1ea';
}
ul li:nth-child(5) a:before {
content:'\f03e';
}
ul a:hover {
background: white;
}
/* SECOND LINE STYLES
–––––––––––––––––––––––––––––––––––––––––––––––––– */
h2 {
text-align: center;
padding: 5px;
}
h2 a {
padding: 5px;
border-bottom: 2px solid #FEB41C;
transition: all .3s ease;
color: white;
}
h2 a:hover {
background: #FEB41C;
color: black;
}
/* MQ STYLES
–––––––––––––––––––––––––––––––––––––––––––––––––– */
@media screen and (max-width: 876px) {
nav {
margin: 0 5px;
}
div.row {
height: auto;
}
h1 {
font-size: 18px;
}
h1, ul {
margin: 20px 0;
}
ul a {
font-size: 0;
}
ul a:before {
padding: 0 5px;
font-size: 32px;
}
}
@media screen and (max-width: 500px) {
ul a:before {
font-size: 22px;
}
}
@media screen and (min-width: 1600px) {
.col-sm-offset-2 {
margin-left: 16.666%;
}
}
@media screen and (min-width: 1600px) {
.col-sm-offset-2 {
margin-left: 16.666%;
}
}
Вот изображение из браузера: 
Пожалуйста, разместите ссылку на jsfiddle! :) – mrks
Извините. Добавлено как jsfiddle, так и экран моего браузера :) –
Проблема в бутстрапе. –