React项目中Bootstrap按钮点击后向下拉伸的问题排查

核心原因 #

父容器<MDBContainer>使用了d-flex flex-column类开启Flex列布局，按钮组件默认继承了Flex布局的拉伸规则，点击后组件内部状态变化触发了该规则，导致按钮自动填满剩余垂直空间。

修复方案 #

以下三种方法任选其一即可解决问题：

• 添加Bootstrap内置类限制拉伸：给登录按钮加上align-self-start类，强制按钮在Flex列布局中保持自身尺寸，不会被拉伸：

  <MDBBtn className="mb-4 align-self-start">Sign in</MDBBtn>
  

• 手动设置Flex属性：通过内联样式直接覆盖Flex行为，确保按钮不放大、不缩小：

  <MDBBtn className="mb-4" style={{ flex: '0 0 auto' }}>Sign in</MDBBtn>
  

• 排查全局样式冲突：检查项目中是否有自定义全局CSS修改了.btn或button标签的Flex属性（比如flex: 1），这类全局样式会影响MDBBtn的默认表现，需要移除或针对性调整。

修改后的完整组件代码 #

import React from 'react';
import {
  MDBContainer,
  MDBInput,
  MDBCheckbox,
  MDBBtn,
  MDBIcon
}
from 'mdb-react-ui-kit';

function App() {
  return (
    <MDBContainer className="p-3 my-5 d-flex flex-column w-50">

      <MDBInput wrapperClass='mb-4' label='Email address' id='form1' type='email'/>
      <MDBInput wrapperClass='mb-4' label='Password' id='form2' type='password'/>

      <div className="d-flex justify-content-between mx-3 mb-4">
        <MDBCheckbox name='flexCheck' value='' id='flexCheckDefault' label='Remember me' />
        <a href="!#">Forgot password?</a>
      </div>

      {/* 添加align-self-start类修复拉伸问题 */}
      <MDBBtn className="mb-4 align-self-start">Sign in</MDBBtn>

      <div className="text-center">
        <p>Not a member? <a href="#!">Register</a></p>
        <p>or sign up with:</p>

        <div className='d-flex justify-content-between mx-auto' style={{width: '40%'}}>
          <MDBBtn tag='a' color='none' className='m-1' style={{ color: '#1266f1' }}>
            <MDBIcon fab icon='facebook-f' size="sm"/>
          </MDBBtn>

          <MDBBtn tag='a' color='none' className='m-1' style={{ color: '#1266f1' }}>
            <MDBIcon fab icon='twitter' size="sm"/>
          </MDBBtn>

          <MDBBtn tag='a' color='none' className='m-1' style={{ color: '#1266f1' }}>
            <MDBIcon fab icon='google' size="sm"/>
          </MDBBtn>

          <MDBBtn tag='a' color='none' className='m-1' style={{ color: '#1266f1' }}>
            <MDBIcon fab icon='github' size="sm"/>
          </MDBBtn>

        </div>
      </div>

    </MDBContainer>
  );
}

export default App;

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