引导3.0中的列仅垂直堆叠 [英] Columns in bootstrap 3.0 only stacking vertically
问题描述
这里是一个真正的网页设计新手。我试过很多地方在网上回答这个（包括这里），但没有效果。
我在bootstrap 3的基本网格中尝试我的手。我的列只是垂直堆叠，它们不会并排坐在一起，而是总是调整大小以填充浏览器窗口。这种情况发生在桌面设备上的Chrome或Firefox中，在移动设备（7英寸或4.7英寸）上的Chrome上也会发生同样的情况。
FYI，我刚刚使用Sublime 2编辑，并将所有引导文件保存在浏览器中的一个文件夹下。不确定这是否相关。
A real Web design newbie here. I've tried plenty of places online for an answer to this (including here) but to no avail. I'm trying my hand at a basic grid in bootstrap 3. My columns only stack vertically, they won't sit side-by-side, and they always resize to fill the browser window. This happens in Chrome or Firefox on desktop, and the same thing happens on chrome on my mobile devices (7 inch or 4.7 inch). FYI, I've just been editing with Sublime 2 and keeping all the bootstrap files under a folder in explorer. Not sure if that's relevant.
<!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英寸平板电脑方便的唯一设备！
Sorry about the terrible code formatting, it's hard to do this on the only device I have handy while on holiday - my 7 inch tablet!
推荐答案
您的代码的问题似乎是对
The problem with your code it seems is the references to
col-md-4
-md-
并替换为
-xs-
它似乎在Twitter引导正常工作。
查看此JSfiddle。 http://jsfiddle.net/jdSF3/
身体
and it seems to be working correctly with Twitter bootstrap. See this JSfiddle. http://jsfiddle.net/jdSF3/ The Body
<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;
}
这篇关于引导3.0中的列仅垂直堆叠的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
