[英]Why the position of bootstrap panels is random on Meteorjs?
我用 Meteorjs 和 Bootstrap 3 創建了一個項目。
在這個項目中,我可以將動態引導面板(或模態)添加到主頁。
困擾我的是這些面板(或模態)的位置是隨機的,我希望它們被組織起來。 例如:當計算機屏幕為中等時,我希望每列中有 3 個面板(或模態)。
你會知道如何做到這一點嗎?
代碼是:
<template name="home">
{{> navigation}}
<div class="container-fluid lov">
<div class="row">
<div class="col-xs-12 col-sm-6 col-md-4 col-lg-3">
{{#each positions}}
{{> position}}
{{/each}}
</div>
</div>
</div>
</template>
這是這個模板的 JavaScript:
Template.home.events ({
'dblclick .lov': function (e, tmpl) {
e.preventDefault();
e.stopPropagation();
if(e.target.className === 'container-fluid lov'){
var id = Positions.insert({ name:'Clique here to change the title', domaine:'ici tu ecris ton text en gros',footername:'le nom de pays et la ville si tu veux'});
Session.set('editing_table',id);
}
}
});
這是合集:
Positions = new Meteor.Collection('positions');
這是允許我們創建面板的位置模板代碼:
<template name="position">
<div class="row">
<div class="col-xs-12 col-sm-6 col-md-4 col-lg-3">
<div class="panel panel-default" id="{{_id}}" style="position:absolute;left:{{left}};top:{{top}}; width:350px">
<div class="panel-heading">
{{#if hadanata3ou}}
<a class="close" data-dismiss="modal">x</a>{{/if}}
{{#if editing_tablename}}
<input class="input input-medium tablename" value="{{name}}" type="text" />
{{else}}
<h6 class="tablename">{{name}}</h6>
{{/if}}
<!-- <h3 class="panel-title">Panel title</h3> -->
</div>
<div class="panel-body">
<div id="{{_id}}">
{{#if editing_field}}
<textarea class="input input-lg efield" name="efield" type="text">
{{domaine}}
</textarea>
{{else}}
<span>
{{domaine}}
</span>
{{/if}}
</div>
</div>
<div class="panel-footer">
{{#if editing_footer}}
<input class="input input-medium footer" value="{{footername}}" type="text" />
{{else}}
<p class="muted">{{footername}}</p>
{{/if}}
</div>
</div>
</div>
</div>
</template>
老實說,我對meteorjs
模板meteorjs
,但我可以向您展示Bootstrap
網格系統如何根據視圖的大小渲染不同數量的面板。
Bootstrap 使用 4 種不同的大小:
lg
(台式機)md
(橫向平板電腦)sm
(人像平板)xs
(移動) 而使用類.visible-SIZE
和.hidden-SIZE
,你可以控制哪些元素顯示/什么尺寸呈現。 例如:
<div class="container-fluid">
<div class="row visible-lg visible-md hidden-sm hidden-xs" >
<div class="col-lg-4 col-md-4">
<div class="panel panel-default">
<div class="panel-heading">
<h4><span class="hidden-lg visible-md">Panel One - Medium</span> <span class="hiddn-md visible-lg">Panel One - Large</span></h4>
</div>
</div>
</div>
<div class="col-lg-4 col-md-4">
<div class="panel panel-default">
<div class="panel-heading">
<h4><span class="hidden-lg visible-md">Panel Two - Medium</span> <span class="hiddn-md visible-lg">Panel Two - Large</span></h4>
</div>
</div>
</div>
<div class="col-lg-4 col-md-4">
<div class="panel panel-default">
<div class="panel-heading">
<h4><span class="hidden-lg visible-md">Panel Three - Medium</span> <span class="hiddn-md visible-lg">Panel Three - Large</span></h4>
</div>
</div>
</div>
</div>
<div class="row hidden-lg hidden-md visible-sm visible-xs">
<div class="col-sm-6 col-xs-6">
<div class="panel panel-default">
<div class="panel-heading">
<h4><span class="hidden-sm visible-xs">Panel One - Extra Small</span> <span class="hiddn-xs visible-sm">Panel One - Small</span></h4>
</div>
</div>
</div>
<div class="col-sm-6 col-xs-6">
<div class="panel panel-default">
<div class="panel-heading">
<h4><span class="hidden-sm visible-xs">Panel Two - Extra Small</span> <span class="hiddn-xs visible-sm">Panel Two - Small</span></h4>
</div>
</div>
</div>
</div>
</div>
此代碼呈現一行.panel panel-default
<div>
元素。 當視圖是md
或lg
,它呈現 3 個<div>
,每個都有col-md-4
和col-lg-4
。 您可以擁有的總列數是 12,一個帶有col-*-4
占用了這 12 個插槽中的 4 個。 因此,3 * 4 是 12,或 1 個完整的行。 與col-sm-6
和col-xs-6
2 * 6 相同。
在您的meterojs
模板中,您需要決定如何使用這些類來呈現正確數量的列。 這不是太難,但花一些時間玩它以獲得您想要的布局。 如果您想查看有效的測試布局,請查看此鏈接:
並嘗試調整瀏覽器窗口的大小。
希望可以讓您深入了解Bootstrap
的網格布局,以及如何根據瀏覽器的大小呈現不同的列。
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.