Bootstrap 4环境下如何实现两个Div中间拖拽调整尺寸？

Hey there! Since you didn’t share your existing CSS and HTML code, I can’t directly confirm if your current setup supports this left-right resizable split feature. But let’s break down how this functionality works, and I’ll show you two reliable approaches to implement it—you can then check if your code can be adapted, or use these methods right away.

Option 1: Pure CSS (Simple, No JavaScript) #

If your layout uses Flexbox, you can leverage the native resize property to add resizing with minimal code. This works best for basic use cases where you don’t need a dedicated drag handle.

Example Code: #

<div class="split-container">
  <div class="content1 resizable">Content 1</div>
  <div class="content2">Content 2</div>
</div>

.split-container {
  display: flex;
  width: 100%;
  height: 400px;
  border: 1px solid #ccc;
}

.content1, .content2 {
  padding: 1rem;
}

.resizable {
  resize: horizontal; /* Enable horizontal resizing */
  overflow: auto; /* Required for resize to work */
  min-width: 200px; /* Prevent content1 from getting too small */
  max-width: calc(100% - 200px); /* Ensure content2 has minimum space */
  background: #f0f0f0;
}

.content2 {
  flex: 1; /* Take up remaining space */
  background: #e0e0e0;
}

Pros & Cons: #

• ✅ No JS needed, super lightweight
• ✅ Works in all modern browsers
• ❌ Drag area is the edge of content1, not a dedicated handle (less intuitive for users)
• ❌ Limited customization compared to JS-driven solutions

Option 2: JavaScript (Flexible, Dedicated Drag Handle) #

For a better user experience (with a visible drag bar between content areas), use JavaScript to handle the resize logic. This works with most layout types (Flexbox, Grid, even absolute positioning).

Example Code: #

<div class="split-container">
  <div class="content1">Content 1</div>
  <div class="drag-handle"></div>
  <div class="content2">Content 2</div>
</div>

.split-container {
  display: flex;
  width: 100%;
  height: 400px;
  border: 1px solid #ccc;
}

.content1, .content2 {
  padding: 1rem;
}

.content1 {
  width: 50%;
  min-width: 200px;
  background: #f0f0f0;
}

.drag-handle {
  width: 4px;
  background: #888;
  cursor: col-resize;
  margin: 0 2px;
  transition: background 0.2s; /* Optional hover effect */
}

.drag-handle:hover {
  background: #555;
}

.content2 {
  flex: 1;
  min-width: 200px;
  background: #e0e0e0;
}

const handle = document.querySelector('.drag-handle');
const content1 = document.querySelector('.content1');
const container = document.querySelector('.split-container');
let isDragging = false;
let startX, startWidth;

// Start drag
handle.addEventListener('mousedown', (e) => {
  isDragging = true;
  startX = e.clientX;
  startWidth = content1.offsetWidth;
  document.body.style.cursor = 'col-resize';
  e.preventDefault(); // Prevent text selection during drag
});

// Handle drag movement
document.addEventListener('mousemove', (e) => {
  if (!isDragging) return;
  
  const deltaX = e.clientX - startX;
  const newWidth = startWidth + deltaX;
  const minWidth = 200;
  
  // Ensure both content areas stay above minimum width
  if (newWidth >= minWidth && (container.offsetWidth - newWidth) >= minWidth) {
    content1.style.width = `${newWidth}px`;
  }
});

// End drag
document.addEventListener('mouseup', () => {
  isDragging = false;
  document.body.style.cursor = '';
});

Pros & Cons: #

• ✅ Dedicated drag handle for clear user interaction
• ✅ Precise control over minimum/maximum widths
• ✅ Works with most layout systems
• ❌ Requires a small amount of JavaScript

How to Check Your Current Code #

If your existing layout uses:

• Flexbox/Grid: You can easily adapt the above examples by modifying selectors and adjusting width rules.
• Absolute Positioning: You’ll need to tweak the JavaScript to update left/right or width properties instead of flex widths.
• Static/Relative Positioning: This won’t work for a split layout—you’ll need to switch to Flexbox/Grid or absolute positioning first.

内容的提问来源于stack exchange，提问作者Rolando