我不是网页设计师。我来自统计背景，目前我正在尝试简单地组建一个网站。我已经在简单使用的 html 和普通 css 中找到了我想要的布局结构来开始它。经过研究，我发现像 bootstrap 这样的框架具有非常好的外观和感觉，并且想朝着那个方向发展。我的问题是如何在 Bootstrap 中构建以下结构。
HTML 文件
<html>
<link rel="stylesheet" type="text/css" href="layout.css" media="screen" />
<div class="container">
<div class="user_stats">
User Statistics
</div>
<div class="hunt">
suggestions
</div>
<div class="personal">
personal
</div>
</div>
</html>
.container {
width:960px;
margin:0 auto;
}
.user_stats, .personal, .hunt {
background-color:#aaa;
margin:0 0 5px 5px;
}
CSS 文件
.user_stats, .personal {
width:400px;
float:left;
}
.user_stats {
height:200px;
}
.personal {
height:300px;
}
.hunt {
width:550px;
height:505px;
float:right;
}
个人和建议(在 css personal 和 hunt 中)我想为图像添加占位符，并希望这些框有滚动条。
这是我的代码的截图:
最佳答案
基本上你的布局代码应该是这样的
<div class="container">
<div class="col-md-5">
<div class="row">User Statistics</div>
<div class="row">Personal</div>
</div>
<div class="col-md-7">
Suggestions
</div>
</div>
当然，您需要链接到 bootstrap.css 以获取网格类。
要让每个 div 都有滚动条，请在所需的 div 上使用以下类
.scrolldiv {
height:550px;
overflow-x: hidden;
overflow-y: auto;
}
即
<div class="col-md-5">
<div class="row scrolldiv">User Statistics</div>
<div class="row scrolldiv">Personal</div>
</div>
<div class="col-md-7 scrolldiv">
Suggestions
</div>
关于jquery - 从基本 HTML 和 CSS 转向 Bootstrap 或流体布局，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/24657021/