트위터의 부트 스트랩을 사용하여 인라인으로 목록을 표시하는 방법

트위터의 부트 스트랩을 사용하여 인라인으로 목록을 표시하는 방법

---

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

---

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; }

---

인라인은 실제로 우리가 필요로하는 인라인이 아닙니다. 즉 display : inline

관찰자가 수평 방향에 가깝다면 부트 스트랩 인라인

다른 요소와 함께 목록을 표시하려면 다음이 필요합니다.

display: inline; added to the UL

<ul class="unstyled inline" style="display:inline">

NB // 스타일 시트에 추가

---

Bootstrap 문서에 따르면 'inline'클래스를 목록에 추가해야합니다. 이처럼 :

<ul class="inline">
    <li>Item one</li>
    <li>Item two</li>
    <li>Item three</li>
</ul>

그러나 '인라인'클래스를 참조하는 부트 스트랩 CSS 파일에 누락 된 CSS가있는 것처럼 작동하지 않습니다. 또한 CSS 파일에 다음 행을 추가하여 작동 시키십시오.

ul.inline > li, ol.inline > li {
    display: inline-block;
    padding-right: 5px;
    padding-left: 5px;
}

참고 URL : https://stackoverflow.com/questions/10906341/how-to-display-a-list-inline-using-twitters-bootstrap