부트 스트랩 목록을 수평으로 배열하는 방법은 무엇입니까?

부트 스트랩 목록을 가로로 정리하는 방법은 무엇입니까? 행 클래스와 함께 목록 항목을 행에 배치하십시오. COL 클래스를 사용하여 COL-MD-4와 같은 목록 항목의 너비를 제어하여 중간 스크린 크기 하에서 4 개의 열을 나타냅니다. 내부 및 외부 마진은 P-2 및 MX-2를 사용하여 조정할 수 있습니다. D-Flex Flex-Wrap을 사용하여 자동 라인 랩핑을 위해 Flexbox를 행에 활성화하십시오. Col-MD-Auto를 사용하여 목록 항목이 필요한 폭을 자동으로 차지하게하십시오.

부트 스트랩 목록 수평 배열? 이 질문은 굉장합니다! 많은 초보자가 여기에 갇히게 될 것이지만 그렇게 복잡하지는 않습니다. 핵심은 부트 스트랩의 그리드 시스템과 몇 가지 팁을 이해하는 것입니다. 이 기사에서는 기본 사항에서 고급으로 데려 가서 부트 스트랩 목록의 수평 배열을 완전히 분류하고 몇 년 동안 제가 밟은 약간의 함정과 독특한 비밀을 공유 할 것입니다.

기본 사항에 대해 먼저 이야기 해 봅시다. 그리드 시스템을 사용하여 부트 스트랩이 어떻게 배치되는지 이해해야합니다. row 및 col 클래스를 사용하여 요소 배열을 제어합니다. row 행을 나타내고 col- 에 숫자가 뒤 따릅니다. 예를 들어, col-md-4 는 중간 스크린 크기의 4 개의 열을 차지하며 총 12 개의 열이 있습니다. 이 그리드 시스템을 이해하지 못하면 뒤에있는 그리드 시스템은 쓸모가 없습니다.

이제 주제로 바로 가자 : 수평으로 목록을 정리하는 방법은 무엇입니까? 가장 간단하고 가장 원유 방법은 목록 항목 li row 에 넣은 다음 col 클래스를 사용하여 각 li 의 너비를 제어하는 ​​것입니다. 이와 같이:

 <code class="html"><div class="row"> <div class="col-md-4"> <li>Item 1</li> </div> <div class="col-md-4"> <li>Item 2</li> </div> <div class="col-md-4"> <li>Item 3</li> </div> </div></code>

당신은 그것을 보셨습니까? col-md-4 는 각 목록 항목이 4 개의 열을 차지할 수 있으며 3 개의 항목은 단 하나의 행을 차지하며 수평으로 완벽하게 배열됩니다! 물론, col-sm- , col-lg- 등을 사용하여 설계 요구에 따라 다양한 화면 크기의 배열을 제어 할 수 있습니다.

하지만 잠깐! 이것은 가장 기본적인 사용법입니다. 실제 응용 프로그램에서는 더 복잡한 상황에 직면 할 수 있습니다. 예를 들어, 목록 항목의 너비는 고정되지 않았거나 목록 항목 사이에 간격을 갖기를 원합니다.

현재 Bootstrap에서 제공하는 다른 클래스를 사용해야합니다. p-2 내부 마진을 추가 할 수 있고 mx-2 수평 마진을 추가 할 수 있습니다. 필요에 따라 이러한 값을 조정할 수 있습니다.

더 나아가서, 목록 항목이 자동으로 래핑하려면 수평으로 유지하지만 화면 너비를 초과 할 때 자동으로 다음 줄로 랩핑하면 어떻게해야합니까? Flexbox가 필요합니다. d-flex flex-wrap 클래스를 row 에 추가하면이 효과가 발생할 수 있습니다.

 <code class="html"><div class="row d-flex flex-wrap"> <div class="col-md-auto p-2"> <li>Item 1</li> </div> <div class="col-md-auto p-2"> <li>Item 2</li> </div> <div class="col-md-auto p-2"> <li>Item 3</li> </div> <div class="col-md-auto p-2"> <li>Item 4</li> </div> <!-- 可以添加更多列表项--> </div></code>

여기서 col-md-auto 각 목록 항목이 필요한 폭을 자동으로 차지할 수있게하는 반면 flex-wrap 라인 랩핑을 허용합니다. p-2 기억하십시오. 이렇게하면 간격을 쉽게 제어하고 목록 품목이 함께 혼잡 해지는 데 도움이됩니다.

마지막으로, 일부 경험 : 부트 스트랩의 기본 스타일에 너무 의존하지 말고 필요에 따라 조정하는 법을 배우십시오. 프로젝트에 가장 적합한 솔루션을 찾으려면 다양한 클래스 및 속성 조합을 시도해보십시오. 시도하는 것을 두려워하지 말고 대담하게 코드를 수정하고 실수로부터 배우고 진정한 부트 스트랩 마스터가 될 수 있습니다! 연습은 진정한 지식을 가져옵니다!

위 내용은 부트 스트랩 목록을 수평으로 배열하는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!