首先给出一个例子:
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如何实现这一功能,以及与jQuery、弹框和下拉菜单等相关知识点。 首先,Bootstrap的显示和隐藏功能主要...
标题中的“基于bootstrap和jquery的可拖拽移动div,可预览的页面生成器”指的是一个Web开发工具,它利用Bootstrap框架和jQuery库构建,允许用户通过拖拽和放置的方式设计网页布局,并实时预览编辑效果。Bootstrap是...
Bootstrap弹出窗口是一种常见于网页设计中的交互元素,它用于显示通知、消息或者提供额外的交互界面。在本项目中,我们关注的是一个可拖拽的Bootstrap弹出窗口,这意味着用户可以通过鼠标点击并拖动来改变弹出窗口的...
在Bootstrap中,时间轴(Timeline)是一个非常有用的元素,尤其适用于展示一系列按时间顺序排列的事件或里程碑。在本篇内容中,我们将深入探讨如何利用Bootstrap创建竖向的时间轴,并结合进度条来呈现事件的完成状态...
在Bootstrap中,栅格系统使用`.row`类定义一行,并使用`.col-*-*`类来设置列的宽度。这里的`*`可以是`xs`(额外小屏,通常是手机),`sm`(小屏,如平板),`md`(中屏,桌面显示器)或`lg`(大屏,宽屏显示器)。每个`.col-...
1. **基本结构**:文档会详细介绍如何在HTML中引入Bootstrap库,包括CSS和JavaScript文件,以及如何创建基本的HTML结构,如`<div class="container">`,`<nav>`,`<header>`,`<footer>`等。 2. **栅格系统**:...
在Bootstrap中,输入框组(Input Groups)和下拉列表(Dropdowns)是两个常用的功能,它们可以组合使用,以创建更复杂的用户界面。下面我们将深入探讨如何在Bootstrap中调整下拉列表与输入框组结合的样式。 首先,...
在使用Bootstrap时间轴插件时,首先需要在项目中引入Bootstrap的CSS和JS文件,确保所有基础样式和交互功能正常工作。然后,可以按照插件提供的HTML结构创建时间轴。例如: ```html <div class="container"> <div ...
Bootstrap Chart 中的线形图提供了多种自定义选项,允许用户根据需要设置图表的样式和内容。 定义 线形图的定义是指图表的基本结构,包括图表的标题、X 轴、Y 轴、数据点等元素。Bootstrap Chart 提供了多种方式来...
在Bootstrap中,步骤进度条(Step Progress Bar)是一种实用的组件,用于显示一系列任务或过程的进度,常用于多步骤表单、购物车结账流程或者复杂的设置向导等场景。现在,我们来详细探讨Bootstrap步骤进度条的实现...
在使用Bootstrap Toast插件时,首先需要确保在项目中引入了Bootstrap的核心CSS和JS文件。通常,这可以通过链接CDN(内容分发网络)或者将`css`和`js`目录下的文件导入到项目中来实现。例如,Bootstrap的CSS文件通常...
在Web应用中,布局是至关重要的,而Bootstrap提供了一套强大的工具,使得开发者能够创建美观且适应各种屏幕尺寸的页面布局。"bootstrap布局可视化可拖拽"这个主题指的是使用Bootstrap配合某些可视化工具或插件,实现...
Bootstrap实现遮罩层 参考文档: http://blog.csdn.net/u014175572/article/details/51800168 Bootstrap实现遮罩层 参考文档: http://blog.csdn.net/u014175572/article/details/51800168 Bootstrap实现遮罩层 ...
Bootstrap 和 Cropper.js 是两个在前端开发中广泛使用的工具,它们结合使用可以实现高效、美观的图片裁剪功能。在H5(HTML5)应用中,这种功能常常用于头像上传、图片预览和编辑等场景。下面我们将深入探讨这两个库...
在本文中,我们将探讨如何使用Bootstrap来创建一个带有验证码和验证功能的登录表单。 首先,要创建这样一个表单,我们需要引入Bootstrap的相关CSS和JavaScript文件。在提供的代码片段中,可以看到引用了以下文件: ...
Bootstrap轮展图(Carousel)是该框架中一个非常重要的组件,它用于创建动态的、响应式的图片或内容轮播效果。在网页设计中,轮展图通常用来展示多个相关但内容有限的空间内的图像或信息,比如广告、产品展示或者...
在Bootstrap3中,div常与Bootstrap的网格系统一起使用,通过class属性如.container、.row和.col-*-*来创建灵活的响应式布局。 压缩包中的"layoutit离线中文版bootstrap3快速建站"可能是一个基于Bootstrap3的可视化...
Bootstrap中,可以使用`<ol>`和`<li>`标签来组织这些步骤,配合`<div class="step-content">`来包含步骤内容。 ```html <div class="step-title">步骤1</div> <div class="step-content"> 步骤1的内容 </...
在Bootstrap中实现多选下拉框可以极大提升用户体验,使得用户在有限的空间内可以选择多个选项。以下是如何使用Bootstrap来创建这样一个功能的详细步骤。 首先,确保你已经在你的项目中引入了Bootstrap的相关资源。...
在Bootstrap框架中,模态框(Modal)是一种非常实用的组件,它允许用户在当前页面上弹出一个对话框,而无需离开当前上下文。模态框提供了丰富的交互性和自定义选项,使得开发者能够轻松创建各种类型的弹出窗口,如...