Bootstrap 및 React에서 텍스트를 왼쪽 정렬하는 방법

Question

저는 반응, 반응 부트스트랩을 사용하고 있습니다.

이것은 내 반응 코드 조각입니다:

으아악

다음은 브라우저에 렌더링할 때 HTML로 변환하는 코드 조각입니다.

으아악

다음과 같이 렌더링됩니다:

햄버거 메뉴 버튼 뒤에 "Test 123"을 왼쪽 정렬하고 싶습니다. CSS 스타일이나 부트스트랩 클래스를 설정하는 방법은 무엇입니까?

데모

데모 코드 샌드박스

업데이트:

개발 도구에서 얻은 해당 CSS는 다음과 같습니다(도움이 되는 경우):

PS:

내package.json:

<Navbar bg="light" expand="lg" className="d-lg-none container-fluid">
   <Navbar.Toggle aria-controls="responsive-course-nav" /> 
   <span className="d-sm-inline-block">Test 123</span>
   { // ... rest of the components }
</Navbar>

Answer 1

자동 코스를 추가하세요.

으아아아

필요에 따라 패딩을 추가하세요. 예:- px-3

으아아아

코드 샌드박스: https:// /codesandbox.io/s/dawn-sunset-gib5x5?file=/src/App.js:365-424

부트스트랩 버전의 경우 다음 클래스를 사용하세요. 부트로더: 4.6.0

으아아아

코드 샌드박스: https://codesandbox.io /s/cocky-bhabha-vmlhqj?file=/src/App.js