2015-09-06 5 views
-1

У меня есть простой HTML-код с четырьмя столбцами div рядом друг с другом с «разделителем» между ними, что мне хотелось бы, когда страница, которую она сжимает, как столбцы, остается той же ширины, и когда они disapear, которые они должны показать ниже, возможно с помощью бутстрапа?bootstraping мой html divs фиксированная ширина

вот 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

Я получил это работает, включив самозагрузки 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-й мкр-3

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