현재 코드입니다.
으아악보통 이런 모습이에요.
각 col에는 고유한 규칙이 있으므로 창 크기에 따라 열을 채웁니다. 그러나 버튼으로 이 작업을 수행할 수 있는 작은 해상도 창이 있습니다.
올바른 레이아웃을 채택하기 전:
"하지만". 버튼의 내부 텍스트가 오버플로되는 반면 "버튼 다운" 버튼 텍스트는 두 줄로 분할됩니다. "but" 안에 텍스트를 어떻게 보관할 수 있나요? 버튼이 오버플로되고 "버튼 누름" 버튼의 텍스트가 두 줄로 분할됩니까? xl 그리드 중단점을 재정의하기 위해 Bootstrap을 다시 컴파일할 수 있다고 생각했지만 이는 너무 많은 패딩입니다(그리고 이러한 작은 문제에 대해 Bootstrap을 수정하는 것은 나쁜 습관입니다). 내가 원하는 동작을 얻을 수 있는 방법이 있나요?
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
주된 문제는
w-100使按钮的宽度为 100%。问题是，当屏幕为手机大小时，行为是预期的（按钮水平填充列）。然而，在大屏幕上，有一个小的分辨率窗口，在此期间w-100을 사용하여 버튼을 내부 텍스트에 필요한 공간보다 작게 강제로 만들려고 한다는 것입니다(버튼 너비가 텍스트를 포함하는 열의 100%이기 때문입니다).이 문제를 해결하기 위해 w-100의 "버트" 두 개를 제거했습니다. 버튼을 클릭하고 CSS에 나만의 규칙을 추가하세요.
으아악따라서 기본적으로 버튼은 내부 텍스트에 필요한 만큼의 공간을 차지하며 작은 화면(XL 중단점 아래의 해상도)에서는 전체 열을 차지합니다.
텍스트가 두 줄로 분할되는 또 다른 문제는 다른 두 버튼의
으아악text-nowrap클래스로 해결되었습니다.