最新消息:VPS服务器又从fzhost.net换回Linode了,主题仍用朋友推荐的大前端D8

【已解决】AdminLTE中间的row的自动布局无效

AdminLTE crifan 53浏览 0评论

折腾:

【记录】用AdminLTE实现报表的原型

期间,对于row中的,通过

col-xx-yy

的形式去自动布局,但是有问题了。

代码:

<div class="row">
<div class="col-md-6">
  <div class="box box-primary">
    <div class="box-header with-border">
      <h3 class="box-title">区域</h3>
      <div class="box-tools pull-right">
        <button type="button" class="btn btn-box-tool" data-widget="collapse" data-toggle="tooltip" title="Collapse">
        <i class="fa fa-minus"></i></button>
      </div>
    </div>
    <div class="box-body">
      <div id="region_map" style="width: 600px; height:400px;" />
    </div>
  </div>
</div>
<div class="col-md-3">
  <div class="box box-primary">
    <div class="box-header with-border">
      <h3 class="box-title">车型</h3>
      <div class="box-tools pull-right">
        <button type="button" class="btn btn-box-tool" data-widget="collapse" data-toggle="tooltip" title="Collapse">
        <i class="fa fa-minus"></i></button>
      </div>
    </div>
    <div class="box-body">
        区域
    </div>
  </div>
</div>
<div class="col-md-3">
  <div class="box box-primary">
    <div class="box-header with-border">
      <h3 class="box-title">渠道</h3>
      <div class="box-tools pull-right">
        <button type="button" class="btn btn-box-tool" data-widget="collapse" data-toggle="tooltip" title="Collapse">
        <i class="fa fa-minus"></i></button>
      </div>
    </div>
    <div class="box-body">
        渠道
    </div>
  </div>
</div>
</div>

效果:

即:

区域占了6/12,希望车型和渠道都占右边的3/12

结果却是:

车型和渠道,宽度都在区域的宽度之内,都跑下面去了。

调试了半天:

把:

<div class="col-md-6”>

换成:

<div class="col-md-6 col-sm-6 col-xs-6”>

之类的,也都不管用。

最后无意间去调试看看源码,结果发现:

车型和渠道,竟然是从属于区域内的:

觉得很是诡异啊。

后来发现,把:

<div id="region_map" style="width: 600px; height:400px;" />

改为:

<div id="region_map" style="width: 600px; height:400px;" >
</div>

结果布局就正常了:

AdminiLTE(还是本身html中规则就是?),对于div来说,即使内部没有内容,也不能写成:

<div />

的形式?

html not support <div />

html not support div close

<div> – HTML | MDN

html – Div styles not working in Outlook Emails – Stack Overflow

html   标签 关闭

html   标签 闭合

html   标签 闭合 div

HTML标签,闭合还是不闭合? – 文章 – 伯乐在线

html – 标签不能自行关闭吗? – 代码日志

省略关闭体和html标签的好处? – 共享笔记

如何关闭未封闭的HTML标签? – 共享笔记

浅谈正则表达式匹配嵌套HTML标签 – Kosmisch Technet – Powered by Kontext

Web前端开发最佳实践(5):正确闭合HTML标签,停止使用不标准的标签和属性 – dangjian – 博客园

“不推荐在HTML标签中添加样式属性,如:iframe、img、input、div等标签中”

-》难道我此处是由于给div加了style属性,而导致div的闭合失效了?

-》试了试:

<div id="region_map" />

结果问题依旧了。

html自闭合标签加斜杠问题? – 知乎

“1. HTML5的规范中,自闭合标签不加斜杠,如:

<br>

<link rel="stylesheet" href="a.css">

<code/>

这种写法显然是不符合规范的,不要这样写。原因如下:

这样写的话,对于浏览器来说这是个错误的开始标签,浏览器会把斜杠去掉,当做一个新标签的开始

<code>

对待,直到遇到父级元素的闭合才会自动补全结束标签

</code>

这可能会导致意料之外的结果。如你本来想要个空标签,但由于兄弟元素的存在生成了一个warpper

不能写<div/>"

html标签的闭合问题 – – ITeye博客

“关于标签的闭合,在XML中一点问题都没有,但是在HTML中,会出现显示不正常的问题。 

比如一个div, 一般形式是这样的:<div id="theIdOfThisDiv" ></div>,由于很多情况下,我们可以在js或css中定义该div块的行为大小属性等,此时标签之间是没有内容的,因此,我一直 认为写成<div id="theIdOfThisDiv" />应该是合乎逻辑的,但是你如果真这么做了,你就会发现浏览器会愤怒的。

 

script 和 iframe 标签不支持缩略写法

 

所以,一般不要简写标签。”

html self closing div

html – Is it OK to use a self closing DIV tag? – Stack Overflow

<div />只在XHTML才支持

HTML 4.x 中就不存在自动闭合self-closing的tag

html – Are (non-void) self-closing tags valid in HTML5? – Stack Overflow

8 The HTML syntax — HTML5

【总结】

背景知识:

HTML中,对于:

<foo> </foo>

其中:

  • <foo>叫做start tag,开始标签
  • </foo>叫做end tag,结束标签

对于现状:

html中的起始标签start tag中:

有些带斜杠是支持的:

<br />
<img src="" />
<input type="text" name="username" />

有些却又不支持:

<div id="myDiv" />
<span id="mySpan" />
<textarea id="someTextMessage" />

的具体解释是:

(1)对于HTML 4来说

<foo /

是的,你没看错,后面没有>

意思是:

<foo>

-》使得对于:

<br />

意味着就是:

<br>>

意思是

<br>&gt;

而:

<title/hello/

意思是:

<title>hello</title>

而浏览器对于这种写法的支持,是很差的

-》所以可以理解为:

普通的浏览器不支持:

<foo /

的写法。

官网也不建议这种写法。

(2)对于XHTML来说

<foo />

意思是:

<foo></foo>

详见规范中的解释。

但要注意的是这种写法只是在XML中才有效,因为普通的网页都是以text/html的方式去解析的

-》所以可以理解为:

普通浏览器中的html中也不支持

<foo />

的写法。

(3)对于(当前2017年)主流的HTML5来说:

<foo />

有两种不同的含义:

解释含义前,先要了解HTML5的规范中对于elmente元素的分类:

  • Void elements空元素:
    • area, base, br, col, embed, hr, img, input, keygen, link, meta, param, source, track, wbr
  • Raw text elements
    • script, style
  • escapable raw text elements
    • textarea, title
  • Foreign elements外部元素
    • SVG和MathML中的标签
  • Normal elements普通元素
    • 其他常见的各种标签,比如div,span等等

A:对于Void elements空元素来说

Void elements空元素:(尤其是那些,在HTML5出现之前就有的,标签内不允许有其他内容的)

只允许start tag,不允许end tag

-》此处的start tag中的末尾的斜杠是可有可无的(允许有,但无意义)

-》只是为了那些之前习惯了XML的人,处理起来方便而已

比如:

<hr />

<br />

之类的。

B:对于Foreign elements外部元素来说

被认为是闭合的效果

即:

<foo />  等价于 <foo></foo>

C:对于其他的HTML5中的元素

比如此处的div,span等等

含义1:首先语法上是错误的

-》即不允许写成 <div />的形式

含义2: 其实,这种错误的写法,对于浏览器,其实没有报错,而是自动尝试去修复该错误

把本来写成<div/>

-》想要实现<div></div>的效果

-》结果<div/>这个end tag,会被识别为start tag,

-》即,识别为:<div>,变成了div的开始了

-》而把接下来的内容,认为是该(div)元素的子元素了

-》然后自动加上缺少了点end tag(</div>)

-》举个(别人给出的code标签的)例子,就容易明白了:

代码:

<!doctype html>
<html>
  <head>
  </head>
  <body>
    <code/>
    <p>aaaaaaa</p>
  </body>
</html>

实际上变成了:

即:

本来是和code同级别的p,变成了code的子元素了。

【最终结论】

HTML5中,除了你常见的一些(void element)空元素:

area, base, br, col, embed, hr, img, input, keygen, link, meta, param, source, track, wbr

(和不常见的,MathML和SVG中的标签)之外,其他元素,都不要写成<xxx/>的形式。

即:

平时可以写<br/> <hr> 等等,

但是不要写 <code/> <div/> <span/>,否则浏览器会把<div/>当作<div>,并且把原<div/>后面的元素自动变成自己的子元素,并在最后加上缺失的<div>。 

转载请注明:在路上 » 【已解决】AdminLTE中间的row的自动布局无效

发表我的评论
取消评论

表情

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址
16 queries in 0.220 seconds, using 10.02MB memory