Bootstrap 控件尺寸位开发者喜欢
> Bootstrap 控件尺寸
通过 .input-lg 类似的类可以为控件设置高度，通过 .col-lg-* 类似的类可以为控件设置宽度。
您可以分别使用 class .input-lg 和 .col-lg-* 来设置表单的高度和宽度。下面的实例演示了这点：
创建大一些或小一些的表单控件以匹配按钮尺寸。
.input-lg Default select .input-sm
&input class=&form-control input-lg& type=&text& placeholder=&.input-lg&&
&input class=&form-control& type=&text& placeholder=&Default input&&
&input class=&form-control input-sm& type=&text& placeholder=&.input-sm&&
&select class=&form-control input-lg&&...&/select&
&select class=&form-control&&...&/select&
&select class=&form-control input-sm&&...&/select&
水平排列的表单组的尺寸
通过添加 .form-group-lg 或 .form-group-sm 类，为 .form-horizontal 包裹的 label 元素和表单控件快速设置尺寸。
Large label
Small label
&form class=&form-horizontal& role=&form&&
&div class=&form-group form-group-lg&&
&label class=&col-sm-2 control-label& for=&formGroupInputLarge&&Large label&/label&
&div class=&col-sm-10&&
&input class=&form-control& type=&text& id=&formGroupInputLarge& placeholder=&Large input&&
&div class=&form-group form-group-sm&&
&label class=&col-sm-2 control-label& for=&formGroupInputSmall&&Small label&/label&
&div class=&col-sm-10&&
&input class=&form-control& type=&text& id=&formGroupInputSmall& placeholder=&Small input&&
调整列（column）尺寸
用栅格系统中的列（column）包裹输入框或其任何父元素，都可很容易的为其设置宽度。
&div class=&row&&
&div class=&col-xs-2&&
&input type=&text& class=&form-control& placeholder=&.col-xs-2&&
&div class=&col-xs-3&&
&input type=&text& class=&form-control& placeholder=&.col-xs-3&&
&div class=&col-xs-4&&
&input type=&text& class=&form-control& placeholder=&.col-xs-4&&
没有找到答案？搜索一下吧！收藏，1.3k 浏览
问题对人有帮助，内容完整，我也想知道答案
问题没有实际价值，缺少关键内容，没有改进余地
做兼职的时候，设计上给了一个480px宽度的psd和一个960宽度的psd。
我当时实现得不好，尤其是480-960这个区间，我设定为767以下直接用480那一版居中了，768以上到960是自适应屏幕宽度的，但是header导航里面的元素到800以下放不下了，于是缩小了间距，下面的产品列表从一行四个变成了一行三个，但是右边空出来一块……
我怀疑这里我到底怎么用上bootstrap。这个要求是中途提出来的，当时django模板已经设定好了，960和480两个宽度下的视图也已经写好了，于是我干了下面这样的事情(我感觉“row“和”span2“的class根本没有生效)：
{% load ... %}
&!DOCTYPE html&
&meta charset="utf-8"&
&meta http-equiv="X-UA-Compatible" content="IE=edge"&
&meta name="viewport" content="width=device-width, initial-scale=1.0"&
&meta name="description" content=""&
&meta name="author" content=""&
&link rel="icon" href="{% static 'icon/icon.ico' %}"&
&title&{% block title %}{% endblock %}&/title&
此处及文件尾部略去js/css引用...........
&body class="{% block bodyclass %}xxxxx{% endblock %}"&
{% include "includes/header.html" %}
&div class="container main"&
{% block body %}{% endblock %}
{% include "includes/footer.html" %}
index.html
{% extends 'base.html' %}
{% load ... %}
{% block title %}
{% endblock %}
{% block body %}
{% include "includes/banner.html" %}
&div ng-app="commodity-list" ng-controller="list-controller"&
&ul class="row category"&
&li class="span2 cur"&&a href="###"&全部&/a&&/li&
&li class="span2"&&a href="###"&游戏&/a&&/li&
&li class="span2"&&a href="###"&应用&/a&&/li&
&li class="span2"&&a href="###"&服饰&/a&&/li&
&li class="span2"&&a href="###"&服务&/a&&/li&
&li class="span2"&&a href="###"&其他&/a&&/li&
&ul class="data"&
&li ng-repeat="obj in data.obj_list"&
{% verbatim %}
&a ng-href="{{ obj.external_url }}"&
&img class="item-pic" ng-src="{{ obj.photo_url }}"&
&div class="item-description"&
&h4 ng-bind="obj.name"&
{% endverbatim %}
&img src="{% static 'img/home/tag.png' %}"&标签/标签/标签
{% addtoblock 'js' %}
&script src="{% static 'js/angular.min.js' %}"&&/script&
&script src="{% static 'js/commodity-list-app.js' %}"&&/script&
{% endaddtoblock %}
{% endblock %}
答案对人有帮助，有参考价值
答案没帮助，是错误的答案，答非所问
经验不足的感觉实现不了。如果商品在浏览器界面是col_3，那么转化成手机界面也会变成上下排列，不会是不会是图片在左，文字在右的形式，期待其他答案。
同步到新浪微博
分享到微博？
与我们一起探索更多的未知
专业的开发者技术社区，为用户提供多样化的线上知识交流，丰富的线下活动及给力的工作机会
加入只需一步
关闭理由：
删除理由：
忽略理由：
推广（招聘、广告、SEO 等）方面的内容
与已有问题重复（请编辑该提问指向已有相同问题）
答非所问，不符合答题要求
宜作评论而非答案
带有人身攻击、辱骂、仇恨等违反条款的内容
无法获得确切结果的问题
非开发直接相关的问题
非技术提问的讨论型问题
其他原因（请补充说明）
我要举报该，理由是：
扫扫下载 App
SegmentFault
一起探索更多未知你的浏览器禁用了JavaScript, 请开启后刷新浏览器获得更好的体验!
用栅格系统假如左边4右边8的布局，各有个背景色，右边的div的内容是ajax更新的，div的高度是内容撑开的不是固定的，想左边的div也跟右边一样高，不用js，用css怎么实现呢？
.row&[class*=&col-&]{
margin-bottom:&-99999
padding-bottom:&99999
overflow:&&
要回复问题请先或
关注: 3 人当前位置： >
bootstrap（一）栅格系统
时间： 00:00
作者:赤月奇
需要准备：离线手册 和 软件包
项目中引用bootstrap.min.js压缩版和bootstrap.min.css。bootstrap-theme.css 这个没用上 。
官方包中需要在
js文件夹中加几个js：application.js holder.min.js 拿色素构成图片 highlight.min.js 高亮显示 jQuery.min.js 1.8.3。
bootstrap框架：
1、CSS样式
2、CSS组件
1、栅格系统
8、响应式图片
页面大块布局：
.ccontainer
栅格系统：
一行分成12列
.col-md-12
.col-xs-12
图片自动生成：
script src="dist/js/holder.min.js"/script
img src="holder.js/100%x300" /
div class="container"
div class="row"
div class="col-md-3"
img src="holder.js/200x200" alt="" /
div class="col-md-3"
img src="holder.js/200x200" alt="" /
div class="col-md-3"
img src="holder.js/200x200" alt
下一篇：没有了bootstrap3.0教程之栅格系统案例(包括栅格选项、从堆叠到水平排列、移动设备和桌面等
作者：佚名
字体：[ ] 来源：互联网 时间：04-11 14:48:47
这篇文章主要介绍了bootstrap3.0教程之栅格系统案例,包括栅格选项、从堆叠到水平排列、移动设备和桌面、Responsive column resets、列偏移、嵌套列、列排序,需要的朋友可以参考下
本文的主要内容将主要分为以下几个部分
1.栅格选项
2.从堆叠到水平排列
3.移动设备和桌面
4.Responsive column resets
通过下面的截图可以比较清楚的来查看Bootstrap的栅格系统是如何在多种不同的移动设备上面进行工作的。
从上面的截图可以看出来，Bootstrap针对不同尺寸的屏幕（包括手机、平板、PC等等）设置了不同的样式类，这样让开发人员在开发时可以有更多的选择。根据我的理解：如果在一个元素上使用多个不同的上面的样式类，那么元素会根据在不同尺寸选择最合适（匹配最理想的）的样式类。简单的举例进行说明：比如在一个元素上我们使用了两个样式类：.col-md-和.col-lg。可以对照上面的截图来看
第一种情况：尺寸》=1200那么会选择.col-lg。
第二种情况：尺寸》=992px 并且尺寸《=1200那么会选择.col-md。
第三种情况如果尺寸《992那么这两个样式类都将不会作用于元素上。
从堆叠到水平排列
栅格选项中的四个样式类的使用都是依附于.row类的基础上，而.row类通常都会在.container的里进行。代码如下:&div class="container"&&div class="row"&&div class="col-md-1"&&/div&&/div&&/div&就是在合适的容器中使用合适的样式类。
使用单一的一组.col-md-*栅格class，你就可以创建一个基本的栅格系统，在手机和平板设备上一开始是堆叠在一起的（超小屏幕到小屏幕这一范围），在桌面（中等）屏幕设备上变为水平排列。将列(col-*-*)放置于任何.row内即可。代码如下:&div class="container"& &div class="page-header"&&h1&案例:从堆叠到水平排列&/h1&&/div&&div class="row"&&divclass="col-md-1"&.col-md-1&/div&&divclass="col-md-1"&.col-md-1&/div&&divclass="col-md-1"&.col-md-1&/div&&divclass="col-md-1"&.col-md-1&/div&&divclass="col-md-1"&.col-md-1&/div&&divclass="col-md-1"&.col-md-1&/div&&divclass="col-md-1"&.col-md-1&/div&&divclass="col-md-1"&.col-md-1&/div&&divclass="col-md-1"&.col-md-1&/div&&divclass="col-md-1"&.col-md-1&/div&&divclass="col-md-1"&.col-md-1&/div&&divclass="col-md-1"&.col-md-1&/div&&/div&&h1&&/h1&&divclass="row"&&divclass="col-md-8"&.col-md-8&/div&&divclass="col-md-4"&.col-md-4&/div&&/div&&h1&&/h1&&divclass="row"&&divclass="col-md-4"&.col-md-4&/div&&divclass="col-md-4"&.col-md-4&/div&&divclass="col-md-4"&.col-md-4&/div&&/div&&h1&&/h1&&divclass="row"&&divclass="col-md-6"&.col-md-6&/div&&divclass="col-md-6"&.col-md-6&/div&&/div&&/div&可以通过控制浏览器的宽度查看堆叠和水平排列的效果
很明显这就是堆叠的效果，就是将浏览器的宽度调为比较小的时候。
现在便是水平排列。将浏览器的宽度调为稍宽之后。你也可以使用其他三个类进行测试效果。
移动设备和桌面
从上面的案例我们可以发现，当小尺寸的屏幕的时候使用.col-md-*的时候它会呈现堆叠的状态，那么开发人员肯定有时候需要小尺寸的屏幕页面展示也要是水平排列的。那么我们的.col-xs-*（小于768px屏幕的样式类）就派上用场了。代码如下:&div class="page-header"&&h1&案例:移动设备和桌面&/h1&&/div&&div class="row"&&div class="col-xs-12 col-md-8"&.col-xs-12 .col-md-8&/div&&div class="col-xs-6 col-md-4"&.col-xs-6 .col-md-4&/div&&/div&&h1&&/h1&&div class="row"&&div class="col-xs-6 col-md-4"&.col-xs-6 .col-md-4&/div&&div class="col-xs-6 col-md-4"&.col-xs-6 .col-md-4&/div&&div class="col-xs-6 col-md-4"&.col-xs-6 .col-md-4&/div&&/div&&h1&&/h1&&div class="row"&&div class="col-xs-6"&.col-xs-6&/div&&div class="col-xs-6"&.col-xs-6&/div&&/div&&h1&&/h1&通过代码可以发现针对前两个的.row样式类中的div，我们在每个元素上面都设置了两个样式类。
这是在稍大尺寸的屏幕上展示的效果，针对每个元素的两个样式会在不同尺寸下进行合适的选择，那么在稍大的情况下，选择的样式类就会是.col-md-*。
第一行：8和4的份比。
第二行：三个4平平均分成三份。
第三行：6和6虽然是大尺寸因为只有这一个样式，也是平均分成两份。
现在就是页面屏幕小于一定程度的时候，针对每个元素进行重新选择样式类。现在真对前两个.row选择的都是col-xs-*。
第一行：两个元素分为12和6，而一行呢就是12份，所以第二个元素会进行换行，然后占据6份一半的位置。
第二行：3个6份。而一行呢就是12份。所以第三个元素会进行换行，然后占据6份一般的位置。
Responsive column resets
通过上面两个案例的解析，可以通过这四个栅格class设计出比较轻松的设计出比较复杂的页面布局了。但是还是会有一些情况中出现一行中的某一列比其他的列高的情况。可能现在你还不太清楚我说的意思，不过没关系，我们直接上案例。代码如下:&div class="page-header"&&h1&案例:Responsive column resets&/h1&&/div&&div class="row"&&div class="col-xs-6 col-sm-3"&.col-xs-6 .col-sm-3(通过调整浏览器的宽度或在手机上即可查看这些案例的实际效果。)&/div&&div class="col-xs-6 col-sm-3"&.col-xs-6 .col-sm-3&/div&&div class="col-xs-6 col-sm-3"&.col-xs-6 .col-sm-3&/div&&div class="col-xs-6 col-sm-3"&.col-xs-6 .col-sm-3&/div&&/div&首先来看一下大屏幕下的页面展示效果
第一个元素的高度的确不太一样。然后看一下小屏幕的。
看现在是这样进行排列的，因为小屏幕下选择的都是.col-xs-*的样式类，而且都是占用6份的。不知道这样的效果是不是你想要的。原来是不是想在小屏幕下看到这四个元素在两行然后每行两个元素呢？
接下来我们将上面的代码稍微改动一下，其实也就是添加了一行代码代码如下:&div class="page-header"&&h1&案例:Responsive column resets&/h1&&/div&&div class="row"&&div class="col-xs-6 col-sm-3"&.col-xs-6 .col-sm-3(通过调整浏览器的宽度或在手机上即可查看这些案例的实际效果。)&/div&&div class="col-xs-6 col-sm-3"&.col-xs-6 .col-sm-3&/div&&div class="clearfix visible-xs"&&/div&&div class="col-xs-6 col-sm-3"&.col-xs-6 .col-sm-3&/div&&div class="col-xs-6 col-sm-3"&.col-xs-6 .col-sm-3&/div&&/div&
这样的效果还是达到了两行两列的。当然你也可以通过响应式工具，这个会在以后进行详细说明，这里暂时不进行示例演示了。
这个其实很简单就是通过一个样式类，通过.col-md-offset-*可以将列偏移到右侧。这些class通过使用*选择器将所有列增加了列的左侧margin。例如，.col-md-offset-4将.col-md-4向右移动了4个列的宽度。代码如下:&div class="page-header"&&h1&案例:列偏移&/h1&&/div&&div class="row"&&div class="col-md-4"&.col-md-4&/div&&div class="col-md-4 col-md-offset-4"&.col-md-4 .col-md-offset-4&/div&&/div&&div class="row"&&div class="col-md-3 col-md-offset-3"&.col-md-3 .col-md-offset-3&/div&&div class="col-md-3 col-md-offset-3"&.col-md-3 .col-md-offset-3&/div&&/div&&div class="row"&&div class="col-md-6 col-md-offset-3"&.col-md-6 .col-md-offset-3&/div&&/div通过阅读上面的代码大概可以想象出它的排版布局了吧。
为了使用内置的栅格进行内容的嵌套，通过添加一个新的.row和一系列的.col-md-*列到已经存在的.col-md-*列内即可实现。嵌套列所包含的列加起来应该等于12。代码如下:&div class="page-header"&&h1&案例:列嵌套&/h1&&/div&&div class="row"&&div class="col-md-9"&Level 1: .col-md-9&div class="row"&&div class="col-md-6"&Level 2: .col-md-6&/div&&div class="col-md-6"&Level 2: .col-md-6&/div&&/div&&div class="row"&&div class="col-md-3"&Level 3: .col-md-3&/div&&div class="col-md-6"&Level 3: .col-md-6&/div&&/div&&/div& &/div&通过上面的代码可以发现，首先定义了一个row,然后在此row中添加了一个.col-md-9的列，代表这个元素占有9列。
然后在这个占有9列的元素里面添加了两个不同的row。
即第一个row:将第一个row分成了两份，每份占有的6列，这12列，但是其总宽度和它外面的占有9列的元素的宽度是一样的。
第二个row:将第二个row分成了两份，第一份占有3列，第二份占有6列，然后剩余的3列没有进行填充。
中文网的解释是：通过使用.col-md-push-*和.col-md-pull-*就可以很容易的改变列的顺序。
通过代码实现了，看到效果了，对于这句话的理解我还是没有摸透。代码如下:&div class="page-header"&&h1&案例:列嵌套&/h1&&/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-2 col-md-push-4"&.col-md-2 .col-md-push-4&/div& &/div&&div class="row"&&div class="col-md-7"&&/div&&div class="col-md-5 col-md-pull-4"&.col-md-5 .col-md-push-4&/div& &/div&可以看出，我定义了三行。
第一行被平均分成三份，每份占有四列。这一行主要是为了与下面两行进行对照的。
第二行里只有一个元素且是占有两列，然后对此元素也添加了.col-md-push-4的样式类。（让占有两个列的元素又向右移动了4列那么现在就是占据了第五列和第六列。）
第三列被分为两份，第一份占有七列，不过是空的，然后第二份占有五列，并且对此元素也添加了一个.col-md-pull-4的样式类，当然此类和上一行附加的类应该正好有相反的效果。（让占有5列的元素又向左移动了四列，原来是从第八列开始的，那么现在是从第四列开始的。）
现在来看一下效果展示
大家感兴趣的内容
12345678910
最近更新的内容