相对于包含 div 而不是窗口的引导网格

Posted 2023-03-06

【中文标题】相对于包含 div 而不是窗口的引导网格

【英文标题】：bootstrap grid relative to containing div instead of window

【发布时间】：2015-03-18 15:22:03

【问题描述】：

请查看此笔以获取快速示例http://codepen.io/Irish1/pen/mymBje

html

<div class="container A">
  <div class="col-xs-12 col-md-4 border1 height"></div>
  <div class="col-xs-12 col-md-4 border2 height"></div>
  <div class="col-xs-12 col-md-4 border3 height"></div>
</div>
<div class="container B border1">
  <div class="col-xs-12 col-md-4 border1 height"></div>
  <div class="col-xs-12 col-md-4 border2 height"></div>
  <div class="col-xs-12 col-md-4 border3 height"></div>
</div>

css

.height 
  height: 20px;


.B 
  width: 325px;
  height: 100px;


.border1 
  border: 1px black solid;

.border2 
  border: 1px blue solid;

.border3 
  border: 1px red solid;

容器 A 具有浏览器窗口的宽度，包含 3 列，当窗口宽度低于 768 像素时，宽度从 33% 变为 100%

容器 B 的设置相同，接受它的宽度仅为 350 像素。正如您在笔中看到的，3 列的宽度为 33%。

我确信这是按预期工作的，但是否可以使网格相对于其包含的 div 而不是浏览器窗口？即容器B中的div有100%的宽度，因为B的宽度小于768px。

【问题讨论】：

使父位置：相对和您的子位置：绝对；

感谢您的回复，不幸的是这不起作用，它只会让子 div 堆叠在每个顶部，它不会影响它们的宽度

您是否将子 div 也显示为内联块？

最初不是，只是尝试过，但没有帮助codepen.io/Irish1/pen/VYbrxP

【参考方案1】：

这是将width to 30% 和display:inline-block 设置为所有div 子类容器。请看下面这如何改变外观：

.height 
  height: 20px;

.B 
  width: 325px;
  height: 100px;

.border1 
  border: 1px black solid;

.border2 
  border: 1px blue solid;

.border3 
  border: 1px red solid;

.container div 
  width: 30%;
  display: inline-block;

<div class="container A">
  <div class="col-xs-12 col-md-4 border1 height"></div>
  <div class="col-xs-12 col-md-4 border2 height"></div>
  <div class="col-xs-12 col-md-4 border3 height"></div>
</div>
<div class="container B border1">
  <div class="col-xs-12 col-md-4 border1 height"></div>
  <div class="col-xs-12 col-md-4 border2 height"></div>
  <div class="col-xs-12 col-md-4 border3 height"></div>
</div>

---

媒体查询方式：

div
  display:inline-block;
  width:30%;
  height:50px;
  background:blue;
  border:1px solid black;
  margin:1%;
  font-weight:bold;
  font-size:30px;
  text-align:center;
  transition: all 0.8s;
  

@media screen and (max-width:768px)
  
    
    div
      background:red;
      display:block;
      width:100%;
      
    
    

<div>A</div><div>B</div><div>C</div>

---

在这一点上，我想提一下我对引导程序的绝对仇恨，主要是因为它缺乏功能。严肃地说，自己编写 css 会更有益（实际上更省时），尤其是当您想“开箱即用”地做 任何事情 时。我发现引导程序限制性太强对于任何类型的“更多功能”

【讨论】：

谢谢，但我要找的是codepen.io/anon/pen/rampNO，但目标中的 div 与常规中的 div 具有完全相同的类，即 col-md-4

您必须覆盖 width 属性 - 可能使用媒体查询。如果您正在寻找它，也许可以发布一个示例？

这听起来像是我必须做的。如果您可以在答案中发布一个示例，那就太好了

@Ir1sh：完成，如果这就是您要找的。 （全屏运行 sn-p 并调整大小以查看效果）

【参考方案2】：

看起来唯一的方法就是以编程方式进行。 在another *** question 中找到了解决方案。 基本上你有一个类，它为元素提供 100% 宽度，并且基于父宽度，这个类被切换。

.m 
    width: 100%;   


$('.somecontainer').on('resize',function()
    if ($('.somecontainer').width() < 140) 
        $('.somecontainer').addClass('m');
     else 
        $('.somecontainer').removeClass('m');
    
);

【参考方案3】：

试试这个删除引导类的填充，或者你可以通过给你自己的类来覆盖它

HTML：

<div class="container regular">
  <div class="col-xs-12 col-md-4 border1 height"></div>
  <div class="col-xs-12 col-md-4 border2 height"></div>
  <div class="col-xs-12 col-md-4 border3 height"></div>
</div>
<div class="container regular">
  <div class="col-xs-12 col-md-offset-4 col-md-4 border1 regular">
    <div class="col-xs-12 col-md-4 border1 height"></div>
    <div class="col-xs-12 col-md-4 border2 height"></div>
    <div class="col-xs-12 col-md-4 border3 height"></div>
  </div>
</div>

CSS：

.height 
  height: 20px;

.target 
  width: 325px;
  height: 100px;

.col-md-4
  padding:0;

.border1 
  border: 1px black solid;

.border2 
  border: 1px blue solid;

.border3 
  border: 1px red solid;

【参考方案4】：

试试这个css：

.abs 
  position: relative;
  display: inline-block;

【讨论】：

感谢您的回复，不幸的是没有快乐

如果您在容器 B 中仅使用带有 col-xs-4 的 div ？

单独的 div 与有 3 个 div 时的行为相同

如果我理解得很好...像这样http://codepen.io/anon/pen/rampNO ?

是的，完全一样。我想得越多，我就越认为这可能是不可能的。样式通过只知道窗口宽度的媒体查询应用，对吗？