Bootstrap修改行高后列内容溢出问题求助

为添加阴影效果的.row-2元素设置固定高度300px后，列内的联系信息和表单内容出现溢出截断情况。

相关代码 #

CSS代码

.row-2 {
  padding: 20px;
  margin: 100px auto;
  box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
  border-radius: 10px;
  height: 300px;
}

.fa-solid {
  font-size: 18px;
}

.address_col {
  background-color: #ee8c68;
  background-image: linear-gradient(315deg, #ee8c68 0%, #eb6b9d 74%);
  padding: 40px 35px;
  border-radius: 10px 0px 0px 10px;
}

.cntct_email,
.cntct_phone {
  color: #fff;
}

.cnt_color {
  color: #4c0101;
  font-weight: 600;
}

.contact_us {
  padding: 40px;
  border: 1px solid #c5c1c1;
  border-radius: 0px 10px 10px 0px;
}

HTML代码

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.1/css/all.min.css" integrity="sha512-KfkfwYDsLkIlwQp6LFnl8zNdLGxu9YAA1QvwINks4PhcElQSvqcyVLLD9aMhXd13uQjoXtEKNosOWaZqXgel0g==" crossorigin="anonymous" referrerpolicy="no-referrer"
  />

  <link rel="stylesheet" href="css/index.css">
  <link rel="stylesheet" href="css/faculty.css">
  <link rel="stylesheet" href="css/contact.css">

  <script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-migrate/3.4.0/jquery-migrate.min.js" integrity="sha512-QDsjSX1mStBIAnNXx31dyvw4wVdHjonOwrkaIhpiIlzqGUCdsI62MwQtHpJF+Npy2SmSlGSROoNWQCOFpqbsOg==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>

  <link href="https://fonts.googleapis.com/css?family=Poppins:300,400,500,600,700,800,900" rel="stylesheet">

  <link rel="stylesheet" href="css/ionicons.min.css">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.1/css/all.min.css" integrity="sha512-KfkfwYDsLkIlwQp6LFnl8zNdLGxu9YAA1QvwINks4PhcElQSvqcyVLLD9aMhXd13uQjoXtEKNosOWaZqXgel0g==" crossorigin="anonymous" referrerpolicy="no-referrer"
  />

  <script src="script/index.js"></script>
</head>

<body>
  <div class="container-fluid banner-container">
    <nav class="navbar navbar-expand-lg navbar-dark bg-dark navbar-custom">
      <div class="container-fluid">
        <a class="navbar-brand" href="#">Logo</a>
        <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
                    <span class="navbar-toggler-icon"></span>
                </button>
        <div class="collapse navbar-collapse" id="navbarNav">
          <ul class="navbar-nav">
            <li class="nav-item">
              <a class="nav-link menu-link" aria-current="page" href="index.html">Home</a>
            </li>
            <li class="nav-item ">
              <a class="nav-link menu-link" href="#">About Us</a>
            </li>
            <li class="nav-item dropdown">
              <a class="nav-link menu-link courses" href="#">Courses</a>
              <ul class="menu-dropdown">
                <li>Maths/Science</li>
                <li>Maths/Commerce</li>
                <li>Maths/Biology</li>
                <li>Commerce</li>
                <li>Arts</li>
              </ul>
            </li>
            <li class="nav-item">
              <a class="nav-link menu-link" href="faculty.html">Faculty</a>
            </li>
            <li class="nav-item">
              <a class="nav-link menu-link" href="">Events & Gallery</a>
            </li>
            <li class="nav-item">
              <a class="nav-link menu-link" href="contactUs.html">Contact</a>
            </li>
          </ul>
        </div>
      </div>
    </nav>
  </div>
  <div class="single-page-heading">
    <h1> Contact Us</h1>
  </div>
  <div class="container">
    <div class="row row-2">
      <div class="col-md-4 address_col">
        <div class="outer_cont">
          <h6>Get in touch</h6>
          <p>We love to hear from you. Our friendly team is always here to chat</p>
          <div class="row">
            <div class="col-sm-12">
              <span class="cnt_color"><i class="fa-solid fa-square-envelope"></i>Chat to us</span>
              <p>Our friendly team is here to help</p>
              <a class="cntct_email" href="">edutech@gmail.com</a>
            </div>
            <div class="col-sm-12">
              <span class="cnt_color"><i class="fa-solid fa-location-dot"></i>Address</span>
              <p>100, Smith street</p>
              <p>Collingwood,VIC 3066 </p>
            </div>
            <div class="col-sm-12">
              <span class="cnt_color"><i class="fa-solid fa-square-phone"></i>Phone</span>
              <p>Our friendly team is here to help</p>
              <a class="cntct_phone" href="tel:9890567893">+919890567893</a>
            </div>
          </div>
        </div>
      </div>
      <div class="col-md-8 contact_us">
        <h4> Contact Us</h4>
        <form>
          <div class="mb-3">
            <label for="exampleInput" class="form-label">Name</label>
            <input type="input" class="form-control" id="Name" aria-describedby="name">
          </div>
          <div class="mb-3">
            <label for="exampleInputEmail1" class="form-label">Email</label>
            <input type="email" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp">
          </div>
          <div class="mb-3">
            <label for="exampleInput" class="form-label">Number</label>
            <input type="input" class="form-control" id="phone" aria-describedby="phone">
          </div>
          <div class="mb-3">
            <textarea class="form-control" aria-label="With textarea"></textarea>
          </div>
          <button type="submit" class="btn btn-primary">Submit</button>
        </form>
      </div>
    </div>
  </div>
</body>
</html>

解决方案 #

1. 移除固定高度（推荐） #

固定高度height:300px是内容溢出的核心原因，直接删除该属性后，容器会自动适配内部内容高度，同时保留阴影、内边距等样式：

.row-2 {
  padding: 20px;
  margin: 100px auto;
  box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
  border-radius: 10px;
  /* 删除 height: 300px */
}

2. 改用最小高度+溢出滚动（需保留高度限制时） #

若必须维持高度下限，用min-height替代height，同时给列容器添加溢出滚动，确保内容可访问：

.row-2 {
  padding: 20px;
  margin: 100px auto;
  box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
  border-radius: 10px;
  min-height: 300px; /* 替换为最小高度 */
}

.address_col, .contact_us {
  height: 100%; /* 让列占满行的高度 */
  overflow-y: auto; /* 内容溢出时显示垂直滚动条 */
}

3. 减小内边距节省空间 #

若希望保持固定高度，可适当减小列的内边距，为内容腾出更多空间：

.address_col {
  padding: 20px 15px; /* 原40px 35px，降低内边距 */
}

.contact_us {
  padding: 20px; /* 原40px，降低内边距 */
}

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