2013-12-08 1 views
1

부트 스트랩 3 (최신)을 사용하여 페이지 중간에있는 목록을 만들 계획입니다. 어떤 머리 위로?부트 스트랩 3으로 센터 페이지에 목록을 만드는 방법

나 ':

목록은

___________________________________________ 
|           | 
|           | 
|  ++++++++++++++++++++++   | 
|  +     +   | 
|  +     +   | 
|  ++++++++++++++++++++++   | 
|           | 
|__________________________________________| 

예상 목록 페이지 너비를 줄이는 스택 안되며, 다음과 같이 유지해야 3 열처럼 페이지의 중심이 될 것으로 예상된다 m 계획은 작업을 위해 몇 가지 코드의 1 열 및 3 열에서 이미지를 넣고 가운데 하나

__________________________________________ 
|  |      |  | 
|  |      |  | 
|  |      |  | 
|________|______________________|________| 
__________________________________________ 
|  |      |  | 
|  |      |  | 
|  |      |  | 
|________|______________________|________| 
+0

세부 사항을 추가 할 수 있다면 귀하를 도울 것입니다. 그러나 귀하가 찾고있는 것을 이해할 수 없습니다. 당신은 열을 분류해야합니까? – scooterlord

+0

아니요, div를 사용해야하는지 아니면 내가 li에 가야하는지 알 수 없습니다. – Ecko123

+0

또한 최신 부트 스트랩으로 무엇을해야하는지 이해할 수 없습니다. – Ecko123

답변

0

에 텍스트를 넣어 :

다음과 같이

는 CSS에서 "센터"클래스를 만듭니다

div.centre{ 
    margin:0px auto; 
} 

를 그런 다음 요소에 추가 다음과 같이

중앙 집중화의 비밀은 여백에있다 : 0 픽셀 자동;, 이것은 콘텐츠를 중앙 집중화하기위한 최신 웹 개발의 관행입니다. I 올바르게 이해한다면

0

그래서, 다음과 같은 코드가 필요 이상의 구성 재현하기 :

<style> 
ul { 
    width:50%; 
    margin:0 auto; 
} 
</style> 

<div class="col-xs-3 col-sm-3 col-md-3 col-lg-3> 
Left side content here 
</div> 

<div class="col-xs-6 col-sm-6 col-md-6 col-lg-6> 


<ul> 
<li>list item</li> 
<li>list item</li> 
<li>list item</li> 
</ul> 


</div> 

<div class="col-xs-3 col-sm-3 col-md-3 col-lg-3> 
Right side content here 
</div> 

숫자는 (3) 및 (6) 100 % 인 상태 열의 폭을 나타낸다 (12). 그래서 (6) = 50 %, (3) = 25 %. 이 값을 변경하면 너비가 변경됩니다. -xs -sm -md -lg는 화면 크기를 의미합니다. 이를 위해 부트 스트랩 문서를 읽어야합니다. 그 밖의 모든 것이 명백합니다.

관련 문제