bootstrap布局两列或者多列表单

1, 代码如下:

                        <div class="form-group">
                            <label for="starttime" class="col-sm-2 control-label">实际开始时间</label>
                            <div class="col-md-4">
                                <input class="form-control" type="text" id="starttime" readonly="readonly" onchange="checkNull(this,‘submitButton‘)" />
                            </div>
                            <label for="endtime" class="col-sm-2 control-label">实际结束时间</label>
                            <div class="col-md-4">
                                <input class="form-control" type="text" id="endtime" readonly="readonly" onchange="checkNull(this,‘submitButton‘)" />
                            </div>
                        </div>

2, control-group became form-group in bootstrap3

时间: 2024-10-25 06:37:44

bootstrap布局两列或者多列表单的相关文章

布局两列div等高方法

一.左右布局,左侧div绝对定位,外div相对定位 1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Document</title> 6 </head> 7 <style type="text/css"> 8 *{margin:0;paddi

布局-两列布局(一列定宽,一列自适应)

结构: 1 <div class="parent"> 2 <div class="left"> 3 <p>left</p> 4 </div> 5 <div class="right"> 6 <p>right</p> 7 <p>right</p> 8 </div> 9 </div> 样式: 1.解决方案一:

NEC学习 ---- 布局 -两列, 左侧定宽,右侧自适应

CSS代码:以下两处代码是NEC中CSS初始化样式和功能性样式.今后的NEC研究中,默认这两处是引用的. /* 这是CSS reset 代码 --- 初始化样式 */ /* reset */ html,body,h1,h2,h3,h4,h5,h6,div,dl,dt,dd,ul,ol,li,p,blockquote,pre,hr,figure,table,caption,th,td,form,fieldset,legend,input,button,textarea,menu{margin:0;

CSS布局 两列布局之单列定宽,单列自适应布局思路

前言 说起自适应布局方式,单列定宽单列自适应布局是最基本的布局形式.比如斗鱼的直播间,后台管理系统都是常用的 我们将从 float, inline-block, table, absolute, flex, grid 这几个布局方式来实现这种效果 float [float + margin] 将定宽的一列使用float,而自适应的一列使用计算后的margin <style> .f1 .parent{overflow: hidden;zoom: 1;} // 触发bfc和haslayout来闭合

如何用纯CSS布局两列,一列固定宽度,另一列自适应?

大家都知道好多网站都是左右布局的,很多公司在笔试和面试环节也常常问这个问题.一个去网易的师兄说14年腾讯面试的时候问过这个问题,网易在笔试和面试时候也问过这个问题,还有很多互联网公司也都涉及到这个问题.下面是我的一些小经验,疏漏之处还望大家体谅. 如果不用纯CSS解决此问题的话,我们可以先固定左侧DIV宽度为:100px,然后用JS取得当前浏览器宽度,再减去100px,然后赋值给右侧DIV宽度即可.这样就愉快的解决了,右侧的宽度就是自适应的了. 当然如果不是固定左侧DIV宽度为:100px的话,

两列布局实现方法

两列布局的实现方式有很多,现根据不同需求列出常用的几种 一.两列固定布局 1.普通的浮动布局 两列固定布局,已知左列和右列内容的宽度,可以用float来实现 html: <div class="wrap clearfix"> <div class="left"> <p>左侧固定宽度</p> <p>左侧固定宽度</p> <p>左侧固定宽度</p> <p>左侧固定

bootstrap的栅格布局与两列布局结合使用

在工作中我们常常需要实现响应式布局,这个可以使用bootstrap的栅格系统来实现,我们在列里也需要实现一部分的响应式.比如下面的效果图,需要实现左边图标固定,右边的自适应 : 左边固定宽度,右边自适应,这个时候我就想到了两列布局,将左右设置float,左边设置固定宽度,右边的宽度为calc(100% - 左边的宽度),把这两种布局结合使用就可以实现效果.

如何通过 CSS 实现一个左边固定宽度、右边自适应的两列布局

最近在百度 IFE 训练营中看见的一道题目: 用两种不同的方法来实现一个两列布局,其中左侧部分宽度固定.右侧部分宽度随浏览器宽度的变化而自适应变化  个人总结出如下三种实现思路: 通过绝对定位实现 See the Pen absolute-two-column by xal821792703 (@honoka) on CodePen. 注意点如下: 需要套一个“positioned”的父元素 div-a 绝对定位,并将位置调整为浏览器左上角 div-b margin-left 属性值为 div-

两列布局的设置方法总结

今天看到了这样一道题 用两种不同的方法来实现一个两列布局,其中左侧部分宽度固定.右侧部分宽度随浏览器宽度的变化而自适应变化 自己感觉有好几种方法,再此总结下: 一.使用position:absolute方法,因为把元素设置为absolute,那元素就脱离了文档流,后面的元素就会占据他原来的位置: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xht