Twitter bootstrap 引导我的html divs固定宽度

Twitter bootstrap 引导我的html divs固定宽度,twitter-bootstrap,Twitter Bootstrap,我有一些简单的HTML,4个div列并排排列,它们之间有一个“间隔符”。我希望当页面缩小时,这些列保持相同的宽度,当它们消失时,它们应该显示在下面,这是否可能与bootstrap一起使用 这是html css <html><head> <style type="text/css"> * {margin: 0; padding: 3px;} #container {height: 800%; width:900%; font-size: 1;} .columns

我有一些简单的HTML,4个div列并排排列,它们之间有一个“间隔符”。我希望当页面缩小时,这些列保持相同的宽度,当它们消失时,它们应该显示在下面,这是否可能与bootstrap一起使用

这是html css

<html><head>
<style type="text/css">
* {margin: 0; padding: 3px;}
#container {height: 800%; width:900%; font-size: 1;}
.columns,.spacer{display: inline-block; *display: inline; zoom: 0; vertical-align: top; font-size: 12px;}
.columns {background-color: white; width: 300px; height: 700px;}
.columns {box-shadow: 10px 10px 5px #888888;}
.spacer {background-color: transparent; width: 1px; height: 1px;}
.footerDIV {box-shadow: 10px 10px 5px #888888;}
.footerDIV {background-color: white; width: 620px; height: 100px;font-size: 12px;}
.spacerHorizontal {background-color: transparent; width: 10px; height: 10px; font-size: 12px;}
A{text-decoration:none}
</style>

<!-- Latest compiled and minified CSS -->
<link href="./bootstrap/css/bootstrap.min.css" rel="stylesheet">

<!-- Optional theme -->
<link href="./bootstrap/css/bootstrap-theme.min.css" rel="stylesheet">

<!-- Latest compiled and minified JavaScript -->
<script src="./bootstrap/js/bootstrap.min.js"></script>

<!-- JQ Tools -->
<script src="./jquery.js"></script>
<script src="./jquery.corner.js"></script>


</head>


<body bgcolor="#d6d6d4">
<div id="container">

<div class="row">
 <div class="columns" id="Admissions" style='border-radius: 10px; background-image: url("./green.png"); background-repeat: no-repeat;'>111111111</div>
 <div id=1spacer1 class=spacer style="background-color: #white; width: 3px; height: 4px;"></div>
 <div class="columns" id="Headcount"  style='border-radius: 10px; background-image: url("./green.png"); background-repeat: no-repeat;'>222222222</div>
 <div id=2spacer1 class=spacer style="background-color: #white; width: 3px; height: 4px;"></div>
 <div class="columns" id="Test1"      style='border-radius: 10px; background-image: url("./green.png"); background-repeat: no-repeat;'>333333333</div>
 <div id=3spacer1 class=spacer style="background-color: #white; width: 3px; height: 4px;"></div>
 <div class="columns" id="Test2"      style='border-radius: 10px; background-image: url("./green.png"); background-repeat: no-repeat;'>444444444</div>
 <div id=4spacer1 class=spacer style="background-color: #white; width: 3px; height: 4px;"></div>
</div>




</body></html>

*{边距:0;填充:3px;}
#容器{高度:800%;宽度:900%;字体大小:1;}
.columns、.spacer{display:inline块;*display:inline;缩放:0;垂直对齐:top;字体大小:12px;}
.columns{背景色:白色;宽度:300px;高度:700px;}
.columns{box shadow:10px 10px 5px#8888888;}
.spacer{背景色:透明;宽度:1px;高度:1px;}
.footerDIV{box shadow:10px 10px 5px#8888888;}
.footerDIV{背景色:白色;宽度:620px;高度:100px;字体大小:12px;}
.s{背景色:透明;宽度:10px;高度:10px;字体大小:12px;}
A{文本装饰:无}
111111111
222222222
333333333
444444444

我通过包含引导css和js来实现它

<link rel="stylesheet" href="./bootstrap/css/bootstrap.min.css">
<link rel="stylesheet" href="./bootstrap/css/bootstrap-theme.min.css">
<script src="./bootstrap/js/bootstrap.min.js"></script>

然后重命名.columns以使用.col-md-3