Fatal编程技术网
  • html/
  • Html 使引导列占用最少的垂直空间

Html 使引导列占用最少的垂直空间

html css twitter-bootstrap

Html 使引导列占用最少的垂直空间,html,css,twitter-bootstrap,Html,Css,Twitter Bootstrap,我有这样一个引导布局 它是一个.row，包含8个.col-lg-3div。问题是，有这么多的垂直空白是不受欢迎的和丑陋的。（水平空白/边距是引导设计的目标，无论如何都不可更改） 如何使框以这样一种方式浮动，即在保持柱的同时占用最少的垂直空间？（箱子的顺序无关紧要） 我试着使用砖石结构，但它不能很好地处理盒子的引导浮动，结果完全破坏了我的布局 如果没有JavaScript，这是可能的吗？显然，还有其他行中的框具有不同的高度，并且并非每行都有8个框 我只想让这个布局更简洁，并利用所有可用的空间…看

我有这样一个引导布局

它是一个
.row
，包含8个
.col-lg-3
div。问题是，有这么多的垂直空白是不受欢迎的和丑陋的。（水平空白/边距是引导设计的目标，无论如何都不可更改）

如何使框以这样一种方式浮动，即在保持柱的同时占用最少的垂直空间？（箱子的顺序无关紧要）

我试着使用砖石结构，但它不能很好地处理盒子的引导浮动，结果完全破坏了我的布局

如果没有JavaScript，这是可能的吗？显然，还有其他行中的框具有不同的高度，并且并非每行都有8个框

我只想让这个布局更简洁，并利用所有可用的空间…

看看这个（只有CCS，但没有引导）：

我怎样才能使盒子以这样一种方式漂浮，即最少的重量 在保持立柱的同时，是否占用了垂直空间？（会议顺序） （不要紧）

由于您正在使用引导，因此
col xx
类将干扰引导css中设置的样式。为了做你想做的事情，打破这个特定用例和/或元素的引导样式。Rest继续使用引导样式

您需要在此处使用CSS列。为了保持其响应速度，请添加所有可能的媒体查询

如果标记保持不变，只需删除
col-x
类即可。这将导致引导样式不适用

<div class="container-fluid">
    <div id="col" class="row">
        <div>Lorem Ipsum</div>
        ...
    </div>
</div>
以及父容器的所有媒体查询，以允许自定义列计数，例如：

@media screen and (min-width:761px) {
    div#col { column-count: 4; column-gap: 0; padding: 8px; }
}
@media screen and (min-width:760px) {
    div#col { column-count: 3; column-gap: 0; padding: 8px; }
}
...
完成代码片段：

div#col>div{
边距：8px；填充：6px；背景色：#efef；
-webkit列内部中断：避免；
}
div#col>div:first child{margin top:0px；}
@媒体屏幕和屏幕（最小宽度：761px）{
第#列{
-webkit列计数：4；-webkit列间距：0；填充：8px；
-moz列计数：4；-moz列间距：0；
列计数：4；列间距：0；
}
}
@媒体屏幕和屏幕（最大宽度：760像素）{
第#列{
-webkit列计数：3；-webkit列间距：0；填充：8px；
-moz列计数：3；-moz列间距：0；
列计数：3；列间距：0；
}
}
@媒体屏幕和屏幕（最大宽度：480px）{
第#列{
-webkit列计数：2；-webkit列间距：0；填充：8px；
-moz列计数：2；-moz列间距：0；
列计数：2；列间距：0；
}
}
@媒体屏幕和屏幕（最大宽度：360px）{
第#列{
-webkit列计数：1；-webkit列间距：0；填充：8px；
-moz列计数：1；-moz列间距：0；
列计数：1；列间距：0；
}
}

乱数假文
Lorem ipsum dolor sit amet，献祭精英
Lorem ipsum dolor sit amet，献祭精英
知识是一种美德，是一种美德，是一种美德，是一种美德。
Lorem ipsum dolor sit amet，献祭精英
知识是一种美德，是一种美德，是一种美德，是一种美德。
乱数假文
Lorem ipsum dolor sit amet，献祭精英
试着这样做：-

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>

<div class="container">

  <div class="row">
    <div class="col-md-3" style="border:1px solid #777777;">
      <div class="row">
        <div class="col-md-12" style="border:1px solid #777777;height:100px;">
        </div>
        <div class="col-md-12" style="border:1px solid #777777;height:450px;">
        </div>
      </div>
    </div>
    <div class="col-md-3" style="border:1px solid #777777;">
      <div class="row">
        <div class="col-md-12" style="border:1px solid #777777;height:100px;">
        </div>
        <div class="col-md-12" style="border:1px solid #777777;height:500px;">
        </div>
      </div>
    </div>
    <div class="col-md-3" style="border:1px solid #777777;">
      <div class="row">
        <div class="col-md-12" style="border:1px solid #777777;height:200px;">
        </div>
        <div class="col-md-12" style="border:1px solid #777777;height:200px;">
        </div>
      </div>
    </div>
    <div class="col-md-3" style="border:1px solid #777777;">
      <div class="row">
        <div class="col-md-12" style="border:1px solid #777777;height:400px;">
        </div>
        <div class="col-md-12" style="border:1px solid #777777;height:100px;">
        </div>
      </div>
    </div>

  </div>
</div>

</body>
</html>


独自创立
不要合并砌石和引导，请使用其中任何一种。可能重复使用最深的第一列重新排序列？-但看起来还是很难看这很有效，但是它的副作用是它改变了盒子的顺序。虽然引导程序首先将框放在行中（1-2-3-4，5-6-7-8），但这种方法首先填充列（导致行：1-3-5-7，2-4-6-8）。 
<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>

<div class="container">

  <div class="row">
    <div class="col-md-3" style="border:1px solid #777777;">
      <div class="row">
        <div class="col-md-12" style="border:1px solid #777777;height:100px;">
        </div>
        <div class="col-md-12" style="border:1px solid #777777;height:450px;">
        </div>
      </div>
    </div>
    <div class="col-md-3" style="border:1px solid #777777;">
      <div class="row">
        <div class="col-md-12" style="border:1px solid #777777;height:100px;">
        </div>
        <div class="col-md-12" style="border:1px solid #777777;height:500px;">
        </div>
      </div>
    </div>
    <div class="col-md-3" style="border:1px solid #777777;">
      <div class="row">
        <div class="col-md-12" style="border:1px solid #777777;height:200px;">
        </div>
        <div class="col-md-12" style="border:1px solid #777777;height:200px;">
        </div>
      </div>
    </div>
    <div class="col-md-3" style="border:1px solid #777777;">
      <div class="row">
        <div class="col-md-12" style="border:1px solid #777777;height:400px;">
        </div>
        <div class="col-md-12" style="border:1px solid #777777;height:100px;">
        </div>
      </div>
    </div>

  </div>
</div>

</body>
</html>