layout – 如何在引导程序中仅使一个列流体

发布时间：2020-12-18 00:25:31 所属栏目：安全来源：网络整理

导读：以下是我在Bootstrap 3.2中的布局结构： div class="container-fluid" div class="row" div class="col-xs-3" !-- I want this column to be fixed. -- /div div class="col-xs-6" !-- I want only this column to be fluid. -- /div div class="col-xs-3" !

以下是我在Bootstrap 3.2中的布局结构：

<div class="container-fluid">
    <div class="row">
        <div class="col-xs-3">
            <!-- I want this column to be fixed. -->
        </div>
        <div class="col-xs-6">
            <!-- I want only this column to be fluid. -->
        </div>
        <div class="col-xs-3">
            <!-- I want this column to be fixed. -->
        </div>
    </div>
</div>

正如您在psuedo-code注释中所看到的,我希望根据屏幕大小,只有中间列是流畅的.

Bootstrap的容器流体方式是否可行？或者我应该通过其他方式？

解决方法

列没有固定宽度的“Bootstrap方式”.因此,我们可以使用CSS在几个方面做你想做的事情

>使用flexbox(最佳方式) – Demo.

.row {
  display: flex;
}
.fixed-side-column {
  width: 250px;
}
.fluid-middle-column {
  flex-grow: 1;
}

>使用calc()(或等效的JavaScript)记住browser support – Demo

.row > div {
  float:left; /* Could also use display: inline-block. */
}
.fixed-side-column {
  width:250px;
}
.fluid-middle-column {
  width:calc(100% - 500px);
}

>在中间元素上使用绝对定位和填充以消除任何计算的需要 – Demo

你必须改变一些标记

<div class="container-fluid">
 <div class="row">
    <div class="fluid-middle-column">
      <!-- I want only this column to be fluid. -->
    </div>
    <div class="fixed-side-column">
      <!-- I want this column to be fixed. -->
    </div>    
    <div class="fixed-side-column right">
      <!-- I want this column to be fixed. -->
    </div>
  </div>
</div>

/* CSS */
.fixed-side-column {
  width:250px;
  float:left;
}
.right {
  float:right;
}
.fluid-middle-column {
  position:absolute;
  z-index:-1;
  top:0;
  left:0;
  width:100%;
  padding: 0 250px 0 250px;
}

您需要添加自定义媒体查询来处理屏幕变小时发生的情况.

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!