반응이 빠른 디자인 솔루션을 찾고 있습니다.

Question

저는 트위터 부트 스트랩 웹 사이트를 가지고 있으며 깨지 않고 디자인을 작동시키는 법을 알 수 없습니다. 사이트의 크기가 약 770px보다 넓 으면 잘 작동하지만 회전식 슬라이드의 양측에있는 두 개의 div는 상대적인 위치에 있으므로 미적 효과 (클라이언트가 원하는 방식)로 이동시킬 수 있습니다. 문제는 사이트의 너비가 약 770px가되면 오른쪽 div가 아래 하나와 충돌하기 시작한 다음 약 735 번에서 실제로 깨집니다. 나는 미디어 쿼리를 사용하여 미디어 쿼리를 사용하여 문제를 해결하려고 시도했지만 다른 문제를 일으키는 것으로 보입니다 (모든 CSS를 일관되게 유지할 수는 없습니다). css와 논쟁하기 전에 시간을 가라 앉히기 전에 더 나은 해결책을 생각할 수 있습니다. 당신의 "... 위로;"

http://www.mcquistonator.com/pdxmobilebootstrap/index.html

Answer 1

가 좋아, 변경 :

현재 위치를 볼 수 있습니다 두 개의 측면 상자 각각에 대한 "margin-top : ...;"규칙 그리고 이것이 당신의 문제를 해결할 것이라고 생각합니다.

Answer 2

@Skrivener는 부동 div에 대해 절대적으로 적합합니다.

이 img 태그가 당신에게 두통이 발생할 것입니다 :

.valuelist { 
    background-color: #787878; 
    padding-left: 5px; 
    border-radius: 5px; 
    border: 2px solid #ffffff; 
    position: relative; 
    margin-top: 120px; 
} 

및

그러나

.affordable { 
    position: relative; 
    margin-top: 120px; 
    background: #0e2b6f url('../img/peel.png') no-repeat fixed left top; 
    color: #ffffff; 
    border-radius: 5px; 
    border: 2px solid #ffffff; 
    padding: 5px; 
    font-size: 150%; 
    text-align: center; 
    line-height: 120%; 
} 

가 주목하는 또 다른 문제가있다는 크기 조정 있기 때문에

/bootstrap.css:101 
img { 
    width: auto 9; /* the 9 is an error */ 
    height: auto; 
    width: 100%; 
    vertical-align: middle; 
    border: 0; 
    -ms-interpolation-mode: bicubic; 
} 

당신의 로고 및 캐 러셀 이미지를 나란히 표시합니다. 회전식 이미지가 100 %가 아닌 문제를 해결하려는 경우 (1330px 이상 또는 767px 이상의 사이트에서 회전식 이미지가 제대로 표시되지 않는 것을 확인하려면 width: 100%;을이 CSS에 추가해야합니다. .

/bootstrap-and-overrides.css 
.carousel-inner > .item > a > img { 
    width: 100%; /* add this one to fix span issue */ 
} 

: 만약 내가 기억, (레일 경우) 보석에서 컴파일되고,

/bootstrap.css:5983 
.carousel-inner > .item > a > img { 
    display: block; 
    line-height: 1; 
    width: 100%; /* add this one to fix span issue */ 
} 

그래서, 당신은 당신의 부트 스트랩 앤 overrides.css이 짧은 버전을 추가 할 수 있습니다

그리고 다른 것 나는 당신이 미디어 쿼리에 너무 익숙하지 않다는 것을 알지만, 당신은 미쳤다. 범위가 붕괴 될 때 767px 이하의 위쪽 여백

나는 당신의 bootstrap-and-overrides.css 파일이 추가하는 것이 좋습니다 것입니다 :

@media (max-width) { 
    .affordable, .valuelist { 
    margin-top: 0px; 
    } 
} 

잘 페이지의 빈 공간을 정리합니다 어느.