引导程序,具有3个列,我需要左列固定宽度并向左浮动,右列固定宽度并向右和中间列浮动至100%

时间:2018-08-17 00:53:48

标签: twitter-bootstrap

我有3列(类似于twitter)。左列需要保持最小宽度为312像素,中间列将设置为最大650像素,并且在调整屏幕大小时可以正常工作。 (即:宽度会根据需要折叠),右列将与左列相同,并保持最小312像素宽度。我想将左侧col浮动到左侧,将右侧col浮动到右侧,并将中心col设置为100%宽度。能做到吗?

中间一栏中的文本框是唯一接收用户输入的文本框。

总而言之,中心将减小宽度,左右将保持最小宽度。

需要参考的布局图像

enter image description here

2 个答案:

答案 0 :(得分:0)

如果我正确理解您的要求,则可以通过多种方式来实现。一种方法是通过CSS flex-box。

考虑以下HTML和CSS,以了解如何定义所需布局的基础:

HTML:

<div class="row">

  <div class="left">
    Left side content
  </div>

  <div class="center">
    Center content
  </div>

  <div class="right">
    Right side content
  </div>

</div>

CSS:

body {
  text-align:center;
}

.row {
  display:flex;
  flex-direction:row;
  justify-content: space-between;
}

.left, .right {  
  width:312px; // Target width for left/right content columns
  min-width:312px; // Minimum allowed width for left/right content columns
}

.left {
  background:red; // Colouring to help with visualising layout boundaries
}
.center {
  width:650px; // Target width for center content column 

  background:yellow; // Colouring to help with visualising layout boundaries
}
.right {
  background:green; // Colouring to help with visualising layout boundaries
}

答案 1 :(得分:0)

如果您被锁定在Bootstrap 4中,则可以通过Bootstrap 4提供的flex utility classes实现此布局。

您可能仍需要根据需要的尺寸提供一些自定义CSS。参见下面的代码:

HTML:

<!-- reuse flex classes provided by boostrap 4 -->
<div class="d-flex flex-row justify-content-between">

  <div class="left">
    Left side content
  </div>

  <div class="center">
    Center content
  </div>

  <div class="right">
    Right side content
  </div>

</div>

CSS:

.left, .right {  
  width:312px; // Target width for left/right content columns
  min-width:312px; // Minimum allowed width for left/right content columns
}

.left {
  background:red; // Colouring to help with visualising layout boundaries
}
.center {
  width:650px; // Target width for center content column 

  background:yellow; // Colouring to help with visualising layout boundaries
}
.right {
  background:green; // Colouring to help with visualising layout boundaries
}