2015-02-07 4 views
0

나는이 웹 사이트에서 일하고있다. 부트 스트랩 패널에 "메인"컨텐츠가 포함되어있다. 이 패널의 이상적인 너비는 670px입니다. 그래서 제가하는 일은 부모를 만드는 것이라고 width: 670px입니다. 너무 많이부트 스트랩 - 흰색 테두리를 둘러싼 패널

enter image description here

나를 귀찮게 무엇 오른쪽에 흰색의 큰 블록이 : 이것은 내 출력됩니다. 그 문제를 어떻게 해결하여 사라지게할까요?

는 내가 HTML 사용하고 있습니다 :

<div class=" panel_big"> 
       <div class="panel_top_orange"> 
    <i class="fa fa-home"></i> 
        <span>Welkom!</span> 
       </div> 
       <div class="panel-body"> 
        Lorem ipsum 
       </div> 

          </div> 

그리고 내 CSS는 :

.panel_big { 
     overflow: hidden !important; 
      border: 3.5px solid rgba(213, 220, 226, 0.9) !important; 
      width: 670px; 
    } 

그래서 어떻게이 공백을 제거 할 수 있습니까? 패널에 670 픽셀 폭을 지정하여 부트 스트랩 설정을 재정의하려했으나 그 공간은 아직있었습니다 ...

감사합니다. 당신이 bootstarp를 사용하는 경우이 내부

+0

목표를보다 명확하게 설명하십시오. – Raul

답변

1

장소의 모든

<div class="container"> 
... 
<div> 

를 div에.

+0

방금 ​​만든 공백을 더 많이 만들었습니다 ... 이제 컨테이너 왼쪽에 공백이 생깁니다 ... –

+0

그것이하는 일입니다. 그것은 컨테이너의 중간에 모든 것을 놓아 보이지 않게합니다. 공백이 전혀 필요하지 않은 경우. 폭 속성을 조정하십시오. 이'width : auto' 또는'overflow-x' 속성을 사용해보십시오. –

0

margin: auto을 사용하고 브라우저 너비가 670px보다 작은 경우 최대 너비가 670px 인 경우 너비를 100 %로 사용하는 것이 더 좋습니다 .panel_big는 브라우저 너비에 맞게 시작됩니다. 코드는 다음과 같습니다.

.panel_big { 
    overflow: hidden !important; 
    border: 3.5px solid rgba(213, 220, 226, 0.9) !important; 

    /* added code */ 
    width: 100%; 
    max-width: 670px; 
    margin: auto; 
} 
관련 문제