`
天之痕苏
  • 浏览: 18364 次
文章分类
社区版块
存档分类
最新评论

bootstrap中的div

 
阅读更多

首先给出一个例子:

eg:

<div class = "row-fluid">
	<div class = "col-lg-6 col-lg-offset-3 col-md-8 col-md-offset-2 col-sm-8 col-sm-offset-2 col-xs-12" style = "background-color:white">
		<div class = "col-lg-6 col-lg-offset-1 col-md-6 col-md-offset-1 col-sm-8 col-sm-offset-1 col-xs-12" style = "padding:0px">
			<h3 style = "margin:20px 0px 5px; padding:0px"><i class = "fa fa-arrow-circle-right"></i>请输入您要找回密码的账号</h3>
		</div>
		<div class = "col-lg-10 col-lg-offset-1 col-md-10 col-md-offset-1 col-sm-10 col-sm-offset-1 col-xs-10 col-xs-offset-1" style = "padding:0px">
			<hr style = "border:1px dotted; padding:0px; margin:5px 0px 20px">
		</div>
				
		<div class = "col-lg-8 col-lg-offset-2 col-md-8 col-md-offset-2 col-sm-8 col-sm-offset-2 col-xs-10 col-lg-offset-1">
			<form action="" class = "form-horizontal" role = "form" method = "POST" style = "" id = "forgetPasswordForm">
						
				<div class = "form-group">
					<div class = "col-md-8 col-md-offset-3 col-lg-8 col-lg-offset-3 col-sm-8 col-sm-offset-3 col-xs-10 col-xs-offset-2">
						<div class = "input-group margin-bottom-sm">
							<span class="input-group-addon"><i class="fa fa-envelope-o fa-fw"></i></span>
							<input class="form-control" type="text" placeholder="请输入账号">
						</div>
					</div>
				</div>
						
			</form>
		</div>
				
		<div>
			<label>A</label>
		</div>
				
	</div>
</div>


然后看一下界面效果:



从界面可以看到,本来A所在的div是在form所在的div的下面的,按照div的前后顺序,A应该出现在form表的右侧或者下侧才是正常的,而这里A却出现在了form表的上侧,这是为什么呢?

我们先来看一下A所在div的位置:

<div class = "col-lg-8 col-lg-offset-2 col-md-8 col-md-offset-2 col-sm-8 col-sm-offset-2 col-xs-10 col-lg-offset-1">
	<form action="" class = "form-horizontal" role = "form" method = "POST" style = "" id = "forgetPasswordForm">
	<span style="white-space:pre">	</span><div class = "form-group">
		<span style="white-space:pre">	</span><div class = "col-md-8 col-md-offset-3 col-lg-8 col-lg-offset-3 col-sm-8 col-sm-offset-3 col-xs-10 col-xs-offset-2">
			<span style="white-space:pre">	</span><div class = "input-group margin-bottom-sm">
				<span style="white-space:pre">	</span><span class="input-group-addon"><i class="fa fa-envelope-o fa-fw"></i></span>
				<span style="white-space:pre">		</span><input class="form-control" type="text" placeholder="请输入账号">
<span style="white-space:pre">				</span></div>
		<span style="white-space:pre">	</span></div>
	<span style="white-space:pre">	</span></div>
						
	</form>
</div>
				
<div>
<span style="white-space:pre">	</span><label>A</label>
</div>
但是A所在的div是没有任何class属性的,而界面显示的是A的div出现在了form所在div的前面,不知道这是不是bootstrap3.0中的一个特征,即没有任何class的div是有限参与排版的,当前得到的结论就是这样。

还有一个要说明的是bootstrap中的栅格问题。

1、container和row要保持一致,要么

<div class = "container-fluid">
	<div class = "row-fluid">
		……
	</div>
</div>
要么:
<div class = "container">
	<div class = "row">
		……
	</div>
</div>
两种书写形式,都可以,唯一不同的是,第一种写法是流布局,如果一行row后面还有空余的栅格,且下一个div设定的栅格数小于或者等于空余的栅格数,那么该div就会排在后面,否则,就从新另起一行,不包括这空余的栅格。

同时,在列中设置padding,可改变列和列之间的gutter,行与行之间的margin,可抵消掉行所包含的列之间的padding。超一行bootstrap3.0文档中的一句话,可以更直观一些:

  • 如果一“行(row)”中包含了的“列(column)”大于 12,多余的“列(column)”所在的元素将被作为一个整体另起一行排列。


分享到:
评论

相关推荐

    bootstrap显示DIV

    在Bootstrap中,"显示DIV"是一个常见的需求,涉及到如何控制元素的可见性和布局。这里我们将深入探讨Bootstrap如何实现这一功能,以及与jQuery、弹框和下拉菜单等相关知识点。 首先,Bootstrap的显示和隐藏功能主要...

    基于bootstrap和jquery的可拖拽移动div,可预览的页面生成器

    标题中的“基于bootstrap和jquery的可拖拽移动div,可预览的页面生成器”指的是一个Web开发工具,它利用Bootstrap框架和jQuery库构建,允许用户通过拖拽和放置的方式设计网页布局,并实时预览编辑效果。Bootstrap是...

    可拖拽的bootstrap弹出窗口

    Bootstrap弹出窗口是一种常见于网页设计中的交互元素,它用于显示通知、消息或者提供额外的交互界面。在本项目中,我们关注的是一个可拖拽的Bootstrap弹出窗口,这意味着用户可以通过鼠标点击并拖动来改变弹出窗口的...

    Bootstrap 竖时间轴

    在Bootstrap中,时间轴(Timeline)是一个非常有用的元素,尤其适用于展示一系列按时间顺序排列的事件或里程碑。在本篇内容中,我们将深入探讨如何利用Bootstrap创建竖向的时间轴,并结合进度条来呈现事件的完成状态...

    Bootstrap自动适应PC、平板、手机的Bootstrap栅格系统

    在Bootstrap中,栅格系统使用`.row`类定义一行,并使用`.col-*-*`类来设置列的宽度。这里的`*`可以是`xs`(额外小屏,通常是手机),`sm`(小屏,如平板),`md`(中屏,桌面显示器)或`lg`(大屏,宽屏显示器)。每个`.col-...

    bootstrap3中文文档

    1. **基本结构**:文档会详细介绍如何在HTML中引入Bootstrap库,包括CSS和JavaScript文件,以及如何创建基本的HTML结构,如`&lt;div class="container"&gt;`,`&lt;nav&gt;`,`&lt;header&gt;`,`&lt;footer&gt;`等。 2. **栅格系统**:...

    bootstrap下拉列表与输入框组结合的样式调整

    在Bootstrap中,输入框组(Input Groups)和下拉列表(Dropdowns)是两个常用的功能,它们可以组合使用,以创建更复杂的用户界面。下面我们将深入探讨如何在Bootstrap中调整下拉列表与输入框组结合的样式。 首先,...

    bootstrap时间轴插件

    在使用Bootstrap时间轴插件时,首先需要在项目中引入Bootstrap的CSS和JS文件,确保所有基础样式和交互功能正常工作。然后,可以按照插件提供的HTML结构创建时间轴。例如: ```html &lt;div class="container"&gt; &lt;div ...

    bootstrap chart

    Bootstrap Chart 中的线形图提供了多种自定义选项,允许用户根据需要设置图表的样式和内容。 定义 线形图的定义是指图表的基本结构,包括图表的标题、X 轴、Y 轴、数据点等元素。Bootstrap Chart 提供了多种方式来...

    Bootstrap的步骤进度条

    在Bootstrap中,步骤进度条(Step Progress Bar)是一种实用的组件,用于显示一系列任务或过程的进度,常用于多步骤表单、购物车结账流程或者复杂的设置向导等场景。现在,我们来详细探讨Bootstrap步骤进度条的实现...

    Bootstrap toast消息框插件

    在使用Bootstrap Toast插件时,首先需要确保在项目中引入了Bootstrap的核心CSS和JS文件。通常,这可以通过链接CDN(内容分发网络)或者将`css`和`js`目录下的文件导入到项目中来实现。例如,Bootstrap的CSS文件通常...

    bootstrap布局可视化可拖拽

    在Web应用中,布局是至关重要的,而Bootstrap提供了一套强大的工具,使得开发者能够创建美观且适应各种屏幕尺寸的页面布局。"bootstrap布局可视化可拖拽"这个主题指的是使用Bootstrap配合某些可视化工具或插件,实现...

    Bootstrap实现遮罩层

    Bootstrap实现遮罩层 参考文档: http://blog.csdn.net/u014175572/article/details/51800168 Bootstrap实现遮罩层 参考文档: http://blog.csdn.net/u014175572/article/details/51800168 Bootstrap实现遮罩层 ...

    bootstrap+cropper图片裁剪代码

    Bootstrap 和 Cropper.js 是两个在前端开发中广泛使用的工具,它们结合使用可以实现高效、美观的图片裁剪功能。在H5(HTML5)应用中,这种功能常常用于头像上传、图片预览和编辑等场景。下面我们将深入探讨这两个库...

    Bootstrap实现登录校验表单(带验证码)

    在本文中,我们将探讨如何使用Bootstrap来创建一个带有验证码和验证功能的登录表单。 首先,要创建这样一个表单,我们需要引入Bootstrap的相关CSS和JavaScript文件。在提供的代码片段中,可以看到引用了以下文件: ...

    bootstrap轮展图demo

    Bootstrap轮展图(Carousel)是该框架中一个非常重要的组件,它用于创建动态的、响应式的图片或内容轮播效果。在网页设计中,轮展图通常用来展示多个相关但内容有限的空间内的图像或信息,比如广告、产品展示或者...

    离线中文版bootstrap3 鼠标点点自动生成布局 html5 div+css

    在Bootstrap3中,div常与Bootstrap的网格系统一起使用,通过class属性如.container、.row和.col-*-*来创建灵活的响应式布局。 压缩包中的"layoutit离线中文版bootstrap3快速建站"可能是一个基于Bootstrap3的可视化...

    bootstrap step步骤

    Bootstrap中,可以使用`&lt;ol&gt;`和`&lt;li&gt;`标签来组织这些步骤,配合`&lt;div class="step-content"&gt;`来包含步骤内容。 ```html &lt;div class="step-title"&gt;步骤1&lt;/div&gt; &lt;div class="step-content"&gt; 步骤1的内容 &lt;/...

    使用bootstrap实现多选下拉框

    在Bootstrap中实现多选下拉框可以极大提升用户体验,使得用户在有限的空间内可以选择多个选项。以下是如何使用Bootstrap来创建这样一个功能的详细步骤。 首先,确保你已经在你的项目中引入了Bootstrap的相关资源。...

    BootStrap中的模态框(modal,弹出层)功能示例代码

    在Bootstrap框架中,模态框(Modal)是一种非常实用的组件,它允许用户在当前页面上弹出一个对话框,而无需离开当前上下文。模态框提供了丰富的交互性和自定义选项,使得开发者能够轻松创建各种类型的弹出窗口,如...

Global site tag (gtag.js) - Google Analytics