Столбцы в бутстрапе 3.0 только штабелируются вертикально

Настоящий веб-дизайн новичок здесь. Я пробовал много мест в Интернете для ответа на этот вопрос (включая здесь), но безрезультатно. Я пробовал свою руку в базовой сетке в бутстрапе 3. Мои столбцы стекают только вертикально, они не будут сидеть бок о бок, и они всегда изменяют размер, чтобы заполнить окно браузера. Это происходит в Chrome или Firefox на рабочем столе, и то же самое происходит на хроме на моих мобильных устройствах (7 дюймов или 4,7 дюйма). FYI, я только что редактировал Sublime 2 и сохранял все файлы начальной загрузки под папкой в проводнике. Не уверен, что это актуально.Столбцы в бутстрапе 3.0 только штабелируются вертикально

<!DOCTYPE html> 
    <html> 
    <head> 
     <title>Bootstrap 101 Template</title> 
     <meta name="viewport" content="width=device-width, initial-scale=1.0"> 
     <!-- Bootstrap --> 
     <link href="css/bootstrap.min.css" rel="stylesheet" media="screen"> 
<style> 
    .col-xs-12{ 
    height: 100px; 
    background-color: blue; 
    color: white; 
    text-align: center; 
    } 
    .col-xs-6{ 
    height: 100px; 
    background-color: yellow; 
    color: black; 
    text-align: center; 
    border: 2px solid black; 
    } 
</style> 
</head>

<div class="container"> 
    <div class="row"> 
     <div class="col-xs-12">col-xs-12 
    </div> 
    </div> 

    <div class="row"> 
     <div class="col-xs-6">col-xs-6 
     </div> 
     <div class="col-xs-6">col-xs-6 
     </div> 

    </div> 
    <div class="row"> 
    <div class="col-md-1">.col-md-1</div> 
    <div class="col-md-1">.col-md-1</div> 
    <div class="col-md-1">.col-md-1</div> 
    <div class="col-md-1">.col-md-1</div> 
    <div class="col-md-1">.col-md-1</div> 
    <div class="col-md-1">.col-md-1</div> 
    <div class="col-md-1">.col-md-1</div> 
    <div class="col-md-1">.col-md-1</div> 
    <div class="col-md-1">.col-md-1</div> 
    <div class="col-md-1">.col-md-1</div> 
    <div class="col-md-1">.col-md-1</div> 
    <div class="col-md-1">.col-md-1</div> 
    </div> 
    <div class="row"> 
    <div class="col-md-8">.col-md-8</div> 
    <div class="col-md-4">.col-md-4</div> 
    </div> 
    <div class="row"> 
    <div class="col-md-4">.col-md-4</div> 
    <div class="col-md-4">.col-md-4</div> 
    <div class="col-md-4">.col-md-4</div> 
    </div> 
    <div class="row"> 
    <div class="col-md-6">.col-md-6</div> 
    <div class="col-md-6">.col-md-6</div> 
    </div> 
     </div> 

<!-- jQuery (necessary for Bootstrap's JavaScript plugins) --> 
<script src="//code.jquery.com/jquery.js"></script> 
<!-- Include all compiled plugins (below), or include individual files as needed --> 
<script src="js/bootstrap.min.js"></script>

К сожалению о страшном форматирование кода, это трудно сделать это на единственном устройстве у меня есть под рукой во время отпуска - мой 7-дюймовый планшет!

источник

2013-10-01 user2833204

Ваш код работает, как ожидалось здесь: http://bootply.com/84307 - Вы видите какие-либо ошибки в консоли браузера? – ZimSystem

Проблема с кодом кажется это ссылки на

col-md-4

Я побежал поиска/замены для всех

-md-

и заменил его

-xs-

и ему похоже, правильно работает с загрузкой Twitter. Смотрите этот JSfiddle. http://jsfiddle.net/jdSF3/ Тело

<div class="container"> 
    <div class="row"> 
     <div class="col-xs-12">col-xs-12 
    </div> 
    </div> 

    <div class="row"> 
     <div class="col-xs-6">col-xs-6 
     </div> 
     <div class="col-xs-6">col-xs-6 
     </div> 

    </div> 
    <div class="row"> 
    <div class="col-xs-1">.col-xs-1</div> 
    <div class="col-xs-1">.col-xs-1</div> 
    <div class="col-xs-1">.col-xs-1</div> 
    <div class="col-xs-1">.col-xs-1</div> 
    <div class="col-xs-1">.col-xs-1</div> 
    <div class="col-xs-1">.col-xs-1</div> 
    <div class="col-xs-1">.col-xs-1</div> 
    <div class="col-xs-1">.col-xs-1</div> 
    <div class="col-xs-1">.col-xs-1</div> 
    <div class="col-xs-1">.col-xs-1</div> 
    <div class="col-xs-1">.col-xs-1</div> 
    <div class="col-xs-1">.col-xs-1</div> 
    </div> 
    <div class="row"> 
    <div class="col-xs-8">.col-xs-8</div> 
    <div class="col-xs-4">.col-xs-4</div> 
    </div> 
    <div class="row"> 
    <div class="col-xs-4">.col-xs-4</div> 
    <div class="col-xs-4">.col-xs-4</div> 
    <div class="col-xs-4">.col-xs-4</div> 
    </div> 
    <div class="row"> 
    <div class="col-xs-6">.col-xs-6</div> 
    <div class="col-xs-6">.col-xs-6</div> 
    </div> 
     </div> 

<!-- jQuery (necessary for Bootstrap's JavaScript plugins) --> 
<script src="//code.jquery.com/jquery.js"></script> 
<!-- Include all compiled plugins (below), or include individual files as needed --> 
<script src="js/bootstrap.min.js"></script>

CSS-

.col-xs-12{ 
    height: 100px; 
    background-color: blue; 
    color: white; 
    text-align: center; 
    } 
    .col-xs-6{ 
    height: 100px; 
    background-color: yellow; 
    color: black; 
    text-align: center; 
    border: 2px solid black; 
    }

источник

2013-10-01 11:40:26

Столбцы в бутстрапе 3.0 только штабелируются вертикально

ответ

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