css正确应用引导框 [英] css for applying correctly for a bootstrap box
本文介绍了css正确应用引导框的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我创建了一个名为 row-one 的父级div。 row-one class将 height 设置为40％。 html正在正确渲染，父级 height 应用于子div（ child-fluid ）。
问题是我有两个盒子，第一个盒子正如预期的那样正常工作，但第二个盒子不像第一个盒子那样呈现
任何人都可以告诉我一些解决方案。
我的代码如下：
Html
< div class =row-one>
< div class =child-fluid>
< div class =box>
< div class =box-header well>
< h2>< i class =icon-bullhorn>< / i> Box First< / h2>
< / div>
< div class =portlet-content box-content alerts>
< div class =alert alert-error>
< strong>哦，snap！< / strong>改变一些东西，然后尝试再次提交。
< / div>
< div class =alert alert-success>
< strong>干得好！< / strong>您成功阅读了这个重要的警报消息。
< / div>
< div class =alert alert-info>
< strong>抬头！< / strong>此警报需要您的注意，但并不是非常重要。
< / div>
< div class =alert alert-block>
< h4 class =alert-heading>警告！< / h4>
< p>最好检查一下自己，你看起来不太好。 Nulla vitae elit libero，pharetra augue。 Praesent commodo cursus magna，vel scelerisque nisl consectetur et。< / p>
< / div>
< / div>
< / div>
< / div>
< / div>
< div class =portlet-layout>
< div class =row-one portlet-column portlet-column-only span12 yui3-dd-dropid =column-1>
< div class =child-fluid portlet-dropzone portlet-column-content portlet-column-content-onlyid =layout-column_column-1>
< div class =portlet-boundary portlet-boundary_Qportlet_ quote-portlet portlet-draggable yui3-dd-dropid =p_p_id_Qportlet _> < span id =p_Qportlet>< / span>
< section class =box portlet>
< div class =box-header well portlet-topper>
< h2 class =portlet-title> < i class =icon-th>< / i> Box Second< / h2>
< / div>
< div class =box-content portlet-content>
< div class =portlet-content-containerstyle =>
< div class =portlet-body>
<！ - Portlet内容在这里 - >
< div class =alert alert-error>
< strong>哦，snap！< / strong>改变一些东西，然后尝试再次提交。
< / div>
< div class =alert alert-success>
< strong>干得好！< / strong>您成功阅读了这个重要的警报消息。
< / div>
< div class =alert alert-info>
< strong>抬头！< / strong>此警报需要您的注意，但并不是非常重要。
< / div>
< div class =alert alert-block>
< h4 class =alert-heading>警告！< / h4>
< p>最好检查一下自己，你看起来不太好。 Nulla vitae elit libero，pharetra augue。 Praesent commodo cursus magna，vel scelerisque nisl consectetur et。< / p>
< / div>
< / div>
< / div>
< / div>
< / section>
< / div>
< / div>
< / div>
< / div>
css
html，
body {
height：100％;
溢出：auto;
}
body {}
.sidebar-nav {
padding：9px 0;
}
.row-one {
height：40％;
}
.row-one .child-fluid，
.box {
height：100％;
}
.row-one .box {
overflow：hidden;
}
.row-one .box-content {
height：calc（100％ - 57px）;
overflow-y：auto;
解决方案
您必须给 height 到 .portlet-layout 和 .portlet-boundary 。具有 height：percent value 的元素继承其父元素，所以父元素必须具有 height值。但是，您可以使用以下规则：
.portlet-layout，
.portlet -bound
{
高度：100％;
}
I have created a html stuff which has a parent div named as row-one. row-one class is having height set to 40%. The html is rendering correctly and the parent height is applied to the child div (child-fluid).
The problem is that I have two boxes, The first box is coming correctly as expected but the second box is not rendering like that of first
Can anyone please tell me some solution for this
My code is as given below
Html
<div class="row-one">
<div class="child-fluid">
<div class="box">
<div class="box-header well">
<h2><i class="icon-bullhorn"></i> Box First</h2>
</div>
<div class="portlet-content box-content alerts">
<div class="alert alert-error">
<strong>Oh snap!</strong> Change a few things up and try submitting again.
</div>
<div class="alert alert-success">
<strong>Well done!</strong> You successfully read this important alert message.
</div>
<div class="alert alert-info">
<strong>Heads up!</strong> This alert needs your attention, but it's not super important.
</div>
<div class="alert alert-block ">
<h4 class="alert-heading">Warning!</h4>
<p>Best check yo self, you're not looking too good. Nulla vitae elit libero, a pharetra augue. Praesent commodo cursus magna, vel scelerisque nisl consectetur et.</p>
</div>
</div>
</div>
</div>
</div>
<div class="portlet-layout">
<div class="row-one portlet-column portlet-column-only span12 yui3-dd-drop" id="column-1">
<div class="child-fluid portlet-dropzone portlet-column-content portlet-column-content-only" id="layout-column_column-1">
<div class="portlet-boundary portlet-boundary_Qportlet_ quote-portlet portlet-draggable yui3-dd-drop" id="p_p_id_Qportlet_"> <span id="p_Qportlet"></span>
<section class="box portlet">
<div class="box-header well portlet-topper">
<h2 class="portlet-title"> <i class="icon-th"></i> Box Second </h2>
</div>
<div class="box-content portlet-content">
<div class=" portlet-content-container" style="">
<div class="portlet-body">
<!-- Portlet content goes here -->
<div class="alert alert-error">
<strong>Oh snap!</strong> Change a few things up and try submitting again.
</div>
<div class="alert alert-success">
<strong>Well done!</strong> You successfully read this important alert message.
</div>
<div class="alert alert-info">
<strong>Heads up!</strong> This alert needs your attention, but it's not super important.
</div>
<div class="alert alert-block ">
<h4 class="alert-heading">Warning!</h4>
<p>Best check yo self, you're not looking too good. Nulla vitae elit libero, a pharetra augue. Praesent commodo cursus magna, vel scelerisque nisl consectetur et.</p>
</div>
</div>
</div>
</div>
</section>
</div>
</div>
</div>
</div>
css
html,
body {
height: 100%;
overflow: auto;
}
body {}
.sidebar-nav {
padding: 9px 0;
}
.row-one {
height: 40%;
}
.row-one .child-fluid,
.box {
height: 100%;
}
.row-one .box {
overflow: hidden;
}
.row-one .box-content {
height: calc(100% - 57px);
overflow-y: auto;
}
解决方案
You have to give height to .portlet-layoutand .portlet-boundary. An elment with height: percentage value inherits from its parent so the parent element must have height value. However, you use the below rules:
.portlet-layout,
.portlet-boundary
{
height: 100%;
}
这篇关于css正确应用引导框的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
