堆栈内存溢出
  繁体   English   中英

以内联方式以外的其他方式定义bootstrap col-md-**

[英]Define bootstrap col-md-** in ways other than inline

 原文  2017-08-07 02:08:27  8   2    html/ css/ bootstrap-4

问题描述

考虑下面的例子 

<html>
<head>
</head>
<body>
   <div class="col-xs-12 col-sm-12 offset-md-4 col-md-4 offset-lg-4 col-lg-4"></div>
   <div class="col-xs-12 col-sm-12 offset-md-4 col-md-4 offset-lg-4 col-lg-4"></div>
   <div class="col-xs-12 col-sm-12 offset-md-4 col-md-4 offset-lg-4 col-lg-4"></div>
   <div class="col-xs-12 col-sm-12 offset-md-4 col-md-4 offset-lg-4 col-lg-4"></div>
   <div class="col-xs-12 col-sm-12 offset-md-4 col-md-4 offset-lg-4 col-lg-4"></div>
   <div class="col-xs-12 col-sm-12 offset-md-4 col-md-4 offset-lg-4 col-lg-4"></div>
   <div class="col-xs-12 col-sm-12 offset-md-4 col-md-4 offset-lg-4 col-lg-4"></div>
   <div class="col-xs-12 col-sm-12 offset-md-4 col-md-4 offset-lg-4 col-lg-4"></div>
   <div class="col-xs-12 col-sm-12 offset-md-4 col-md-4 offset-lg-4 col-lg-4"></div>
   <div class="col-xs-12 col-sm-12 offset-md-4 col-md-4 offset-lg-4 col-lg-4"></div>
   <div class="col-xs-12 col-sm-12 offset-md-4 col-md-4 offset-lg-4 col-lg-4"></div>
   <div class="col-xs-12 col-sm-12 offset-md-4 col-md-4 offset-lg-4 col-lg-4"></div>
   <div class="col-xs-12 col-sm-12 offset-md-4 col-md-4 offset-lg-4 col-lg-4"></div>
   <div class="col-xs-12 col-sm-12 offset-md-4 col-md-4 offset-lg-4 col-lg-4"></div>
   <div class="col-xs-12 col-sm-12 offset-md-4 col-md-4 offset-lg-4 col-lg-4"></div>
   <div class="col-xs-12 col-sm-12 offset-md-4 col-md-4 offset-lg-4 col-lg-4"></div>
   <div class="col-xs-12 col-sm-12 offset-md-4 col-md-4 offset-lg-4 col-lg-4"></div>
   <div class="col-xs-12 col-sm-12 offset-md-4 col-md-4 offset-lg-4 col-lg-4"></div>
   <div class="col-xs-12 col-sm-12 offset-md-4 col-md-4 offset-lg-4 col-lg-4"></div>
   <div class="col-xs-12 col-sm-12 offset-md-4 col-md-4 offset-lg-4 col-lg-4"></div>
   <div class="col-xs-12 col-sm-12 offset-md-4 col-md-4 offset-lg-4 col-lg-4"></div>
   <div class="col-xs-12 col-sm-12 offset-md-4 col-md-4 offset-lg-4 col-lg-4"></div>
   <div class="col-xs-12 col-sm-12 offset-md-4 col-md-4 offset-lg-4 col-lg-4"></div>
   <div class="col-xs-12 col-sm-12 offset-md-4 col-md-4 offset-lg-4 col-lg-4"></div>
   <div class="col-xs-12 col-sm-12 offset-md-4 col-md-4 offset-lg-4 col-lg-4"></div>
   <div class="col-xs-12 col-sm-12 offset-md-4 col-md-4 offset-lg-4 col-lg-4"></div>
   <div class="col-xs-12 col-sm-12 offset-md-4 col-md-4 offset-lg-4 col-lg-4"></div>
   <div class="col-xs-12 col-sm-12 offset-md-4 col-md-4 offset-lg-4 col-lg-4"></div>
   <div class="col-xs-12 col-sm-12 offset-md-4 col-md-4 offset-lg-4 col-lg-4"></div>
   <div class="col-xs-12 col-sm-12 offset-md-4 col-md-4 offset-lg-4 col-lg-4"></div>
</body>
</html>

是否有更清洁的方式编写此代码，如下所示。 我不明白为什么必须内联指定引导网格规则 

<html>
<head>
   <style>
      .div-alpha
      {
         col-xs:12;
         col-sm:12;
         col-md:4;
         col-lg:4;
         offset-md:4;
         offset-lg:4;
      }
   </style>
</head>
<body>
   <div class="div-alpha"></div>
   <div class="div-alpha"></div>
   <div class="div-alpha"></div>
   <div class="div-alpha"></div>
   <div class="div-alpha"></div>
   <div class="div-alpha"></div>
   <div class="div-alpha"></div>
   <div class="div-alpha"></div>
   <div class="div-alpha"></div>
   <div class="div-alpha"></div>
   <div class="div-alpha"></div>
   <div class="div-alpha"></div>
   <div class="div-alpha"></div>
   <div class="div-alpha"></div>
   <div class="div-alpha"></div>
   <div class="div-alpha"></div>
   <div class="div-alpha"></div>
   <div class="div-alpha"></div>
   <div class="div-alpha"></div>
   <div class="div-alpha"></div>
   <div class="div-alpha"></div>
   <div class="div-alpha"></div>
   <div class="div-alpha"></div>
   <div class="div-alpha"></div>
   <div class="div-alpha"></div>
   <div class="div-alpha"></div>
   <div class="div-alpha"></div>
   <div class="div-alpha"></div>
   <div class="div-alpha"></div>
   <div class="div-alpha"></div>
</body>
</html>

2 个解决方案

解决方案1
 1  2017-08-07 02:21:01

我不认为我们可以在CSS的类中包含类，如果可以尝试使用javascript做到这一点，请签出以下代码 

var classes = "col-xs-12 col-sm-12 offset-md-4 col-md-4 offset-lg-4 col-lg-4"
$('body').children('div').each(function () {
    $(this).addClass(classes);
});

解决方案2
 1 已采纳  2017-08-07 02:52:30

Bootstrap仅仅是一个框架。 您可以随意调整。 只需将Bootstrap赋予其选择器的样式应用于您自己的样式，就可以进行修改以适合自己。

引导的col-选择简单地将不同的造型在给定的断点元素。

  • col-xs-与max-width: 768px相关max-width: 768px （仅影响电话）。
  • .col-sm-于min-width: 768px 。
  • .col-md-于min-width: 992px 。
  • .col-lg-对应min-width: 1200px 。

请记住， 从Bootstrap 3开始 ，它们使用移动优先设计 ，因此媒体查询的顺序非常重要（由于相同的特异性 ）！ 始终从最小的媒体查询开始，一直向上到最大的媒体查询（类似于“移动优先”一词）。

您可以设计自己的媒体查询，以提供与Bootstrap相同的效果，同时通过在自己的类中组合各种Bootstrap逻辑类来减少所需的HTML： 

 /* Purely for visibilty */ .div-alpha { height: 100px; border: 1px solid black; } * { box-sizing: border-box; } .row { margin-left: 15px; margin-right: 15px; } .row::after, .row::before { display: table; content: " "; } .row::after { clear: both; } *::after, *::before { box-sizing: border-box; } .div-alpha { float: left; position: relative; min-height: 1px; padding-right: 15px; padding-left: 15px; } /* .col-xs- */ @media (max-width: 768px) { .div-alpha { width: 100%; } } /* .col-sm- */ @media (min-width: 768px) { .div-alpha { width: 66.66666666%; } } /* .col-md- */ @media (min-width: 992px) { .div-alpha { width: 50%; } } /* .col-lg- */ @media (min-width: 1200px) { .div-alpha { width: 33.33333333%; } } 
 <div class="row"> <div class="div-alpha"></div> <div class="div-alpha"></div> <div class="div-alpha"></div> <div class="div-alpha"></div> <div class="div-alpha"></div> </div>

在上面的代码中，我将“核心” Bootstrap逻辑应用于row和独立的.div-alpha 。 然后，我使用媒体查询来控制它如何适应各种不同的宽度（不需要Bootstrap）。 这方面的一个的jsfiddle是可以在这里找到 。

希望这可以帮助！ :)

暂无
暂无

声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

相关问题 Bootstrap .col-md- *错误 堆叠引导列（col-md- *） Bootstrap col-md- *移动视图时的排序 引导程序：嵌套的col-md- *元素的高度相等 radio-inline应该仅适用于col-lg-*，col-md-*，col-sm- *，而不适用于col-xs- * 引导程序3按钮的动态宽度保持在col-md- *且按钮上带有长标签 是否需要为每个cols设置col-lg-** col-md-** col-sm-** col-xs-**？ 对 class 的所有实例使用相同的 col-md-* 和 col-lg-* 电子邮件模板的内联样式，使其像从 col-md-6 到 col-12 的引导网格 当嵌套在另一行中时如何摆脱col-md- *填充而又不影响整个网格？
相关标签
 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM