Bootstrap 自动调整列宽 [英] Bootstrap Auto adjust column Width

问题描述

我创建了两列页面.喜欢，

<div class="col-sm-2"></div><div class="col-sm-10"></div>

如果第一列没有数据，bootstrap 是否有调整列宽的选项?

解决方案

答案是否定的！如果您查看源代码你会看到 col-sm 的宽度是用百分比来定义的:

//生成小列.make-sm-column(@columns; @gutter: @grid-gutter-width) {位置:相对；最小高度:1px；padding-left: (@gutter/2);填充右:(@gutter/2)；@media(最小宽度:@screen-sm-min){向左飘浮;宽度:百分比((@columns/@grid-columns))；}}

所以最好的办法是在服务器端分配正确的类或编写一个小脚本来检查内容并调整类.

I have created Two column page.Like,

<div class="row">
  <div class="col-sm-2"></div>
  <div class="col-sm-10"></div>
</div>

Does bootstrap have option like adjusting the width of the column if first column doesn't have data.?

解决方案

The quick answer is no! If you take a look at the source code you'll see that for col-sm the width is defined in terms of percent:

// Generate the small columns
.make-sm-column(@columns; @gutter: @grid-gutter-width) {
  position: relative;
  min-height: 1px;
  padding-left:  (@gutter / 2);
  padding-right: (@gutter / 2);

  @media (min-width: @screen-sm-min) {
    float: left;
    width: percentage((@columns / @grid-columns));
  }
}

so your best shot would be to assign correct classes on the server side OR write a small script that checks the content and adapts the classes.

这篇关于Bootstrap 自动调整列宽的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！