为什么引导面板的位置在 Meteorjs 上是随机的

Why the position of bootstrap panels is random on Meteorjs?

本文关键字：Meteorjs 随机 位置 为什么      更新时间：2023-09-26

我用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模板了解不多，但我可以向您展示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 整行。与 2 * 6 的 col-sm-6 和 col-xs-6 相同。

在meterojs模板中，需要决定如何使用这些类来呈现正确数量的列。这并不太难，但花一些时间玩它以获得您想要的布局。如果要查看有效的测试布局，请查看此链接：

引导

并尝试调整浏览器窗口的大小。

希望这能让您深入了解Bootstrap的网格布局，以及如何根据浏览器的大小呈现不同的列。

相关文章：