[twitter-bootstrap] Twitter의 부트 스트랩을 사용하여 인라인으로 목록을 표시하는 방법

Program / 글쓴이

Bootstrap을 사용하여 인라인으로 목록을 표시하고 싶습니다. 이것을 달성하기 위해 Bootstrap에서 추가 할 수있는 클래스가 있습니까?

답변

부트 스트랩 2.3.2

<ul class="inline">
  <li>...</li>
</ul>

부트 스트랩 3

<ul class="list-inline">
  <li>...</li>
</ul>

부트 스트랩 4 

<ul class="list-inline">
  <li class="list-inline-item">Lorem ipsum</li>
  <li class="list-inline-item">Phasellus iaculis</li>
  <li class="list-inline-item">Nulla volutpat</li>
</ul>

출처 : http://v4-alpha.getbootstrap.com/content/typography/#inline

업데이트 된 링크 https://getbootstrap.com/docs/4.4/content/typography/#inline

답변

2.3.2와 3의 부트 스트랩 문서에 따르면 클래스는 다음과 같이 정의되어야합니다.

부트 스트랩 2.3.2

<ul class="inline">
  <li>...</li>
</ul>

부트 스트랩 3

<ul class="list-inline">
  <li>...</li>
</ul>

답변

TheBrent의 답변은 일반적으로 사실이지만 공식 부트 스트랩 방식으로 수행하는 방법에 대한 질문에는 대답하지 않습니다. 부트 스트랩 마크 업은 간단합니다.

<ul class="inline">
  <li>1</li>
  <li>2</li>
  <li>3</li>
</ul>

출처

http://jsfiddle.net/MgcDU/4602/

답변

Raymond의 답변을 완성하려면

부트 스트랩 2.3.2

<ul class="inline">
  <li>...</li>
</ul>

부트 스트랩 3

<ul class="list-inline">
  <li>...</li>
</ul>

부트 스트랩 4 

<ul class="list-inline">
  <li class="list-inline-item">Lorem ipsum</li>
  <li class="list-inline-item">Phasellus iaculis</li>
  <li class="list-inline-item">Nulla volutpat</li>
</ul>

출처 : http://v4-alpha.getbootstrap.com/content/typography/#inline

답변

bootstrap.css 파일에서 특정 항목을 찾을 수 없습니다. 그래서 CSS를 사용자 정의 CSS 파일에 추가했습니다.

.inline li {
    display: inline;
}

답변

나는 목록 인라인이 부트 스트랩 4에서 작동하지 않았다는 사실에 놀랐다. 마침내 부트 스트랩 4 문서에 넣었다.

부트 스트랩 3 및 4

<ul class="list-inline">
  <li class="list-inline-item">Lorem ipsum</li>
  <li class="list-inline-item">Phasellus iaculis</li>
  <li class="list-inline-item">Nulla volutpat</li>
</ul>

출처 : http://v4-alpha.getbootstrap.com/content/typography/#inline

답변

이 솔루션은 Bootstrap v2를 사용하여 작동하지만 TBS3에서는 클래스 INLINE입니다. TBS3에서 동등한 클래스 (있는 경우)가 무엇인지 알지 못했습니다.

이 신사는 v2와 v3의 차이점에 대해 꽤 좋은 기사를 가지고있었습니다.

http://mattduchek.com/differences-between-bootstrap-v2-3-and-v3-0/

편집-CSS를 사용 li하여 문제를 해결하기 위해 요소를 대상으로 지정하십시오.

    { display: inline-block; }

제 상황에서는 LI 대신 UL을 타겟팅하고있었습니다

    nav ul li { display: inline-block; }