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

Question

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

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

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

需要参考的布局图像

Answer 1

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

Answer 2

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