引导程序，有 3 个列我需要左列固定宽度和左浮动，右列固定宽度和右列和中间列浮动到 100%

Question

我有 3 列（类似于 twitter）。左列需要保持最小宽度为 312 像素，中间列将设置为最大 650 像素，并在调整屏幕大小时正常运行。 （即：它会根据需要在宽度上折叠）右列将与左列一样并保持最小 312 像素宽度。我想将左列浮动到左侧，将右列浮动到右侧并将中心列设置为 100% 宽度。这个可以吗？

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

总而言之，中心的宽度会减小，左右会保持最小宽度。

需要参考的布局图

Answer 1

如果您被锁定在 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
}

Answer 2

如果我正确理解您的要求，这可以通过多种方式实现。一种这样的方法是通过 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
}