如何在引导程序中生成以下布局3 css
问题描述:
我想在引导程序3 css中生成以下布局,但侧栏总是很小,并且不能正确放大,并且移动模式中存在问题我该如何继续。提前致谢。如何在引导程序中生成以下布局3 css
注: 这就是我试图
<div style="display:table;height:100%;width:100vw">
<div style="display:table-row-group;height:100%;width:100vw">
<div class="hidden-xs col-sm-half" style="background:black;height:100vh;"></div>
<div class="col-sm-10 col-md-10 col-lg-11half">
<div id="prdgrid">
<breadcrumbs path=prd.path ></breadcrumbs>
<div class="row" style="width: 100%;height:100%">
<div class="leftcol">
<div class="infotile" style="height: 25%;">
<infotile></infotile>
</div>
<div class="detail" style="height:31%">
<details></details>
</div>
<div>
<match></match>
</div>
</div>
<div class="rightcol" style="height:100%">
<div class="pricetile hidden-xs">
<pricechart></pricechart>
</div>
<div class="rightbottomcol" style="height:51%">
<div class="rev">
<div class="title">
<tile></tile>
</div>
</div>
<div class="rev" style="height: 100%;">
<pd></pd>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
答
你必须使用引导网格和面板的布局相同,而不是创建自己的CSS布局。请参考链接:https://getbootstrap.com/examples/grid/和http://www.w3schools.com/bootstrap/bootstrap_grid_system.asp
答
这是你的代码应该是什么样子:
<div class="container">
<div class="row">
<div class="col-md-4">
<div class="col-md-12"></div>
<div class="col-md-12"></div>
</div>
<div class="col-md-8"></div>
</div>
<div class="row">
<div class="col-md-4"></div>
<div class="col-md-2"></div>
<div class="col-md-6"></div>
</div>
</div>
+0
随着主要区域内容的增加,边栏会增加 – user93
巡展代码请。 –
请张贴你试过的任何东西。如果可能的话,请发布跑步小提琴。 –