2017-10-16 2 views
-1

CC3.0 라이센스에 따라 w3layouts.com에서 기성 HTML5 웹 사이트 템플릿을 다운로드했습니다. Bootstrap 등의 중고 스크립트는 모두 이전 버전이므로이 기능과 소스 코드를 업데이트하고 있습니다. 그러나 나는 해결할 수없는 문제에 직면 해있다. 나는 Bootstrap에서 새로운데, 내가 처음으로 작업하고있다. 나는 내 자신의 디자인을 코딩하는 것에 지쳤다. :)부트 스트랩 줄 바꿈 없음

원본/이전 템플릿이 Bootstrap v3.3.4를 사용 중이고 4.0.0-beta를 사용 중입니다.

here in the original에서 볼 수 있듯이 "내 서비스"섹션은 모두 모양입니다. 그러나 my updated version에서 열은 감싸지 않을 것입니다. 나는 이미 많은 것을 시도해 봤지만 많은 해결책을 찾지 못했습니다.

  • HTML : https : //로 pastebin.com/NJYmqAk2
  • CSS : https : //로 pastebin.com/AdYUTtFe

(미안 여기

는 소스 코드입니다 붙여 넣기 링크를 수정해야만 했어.) 저도 평판이 좋지 않습니다. :))

+0

링크가 나를 위해 작동하지 않습니다. 나는 당신이 게시물에 html/css 코드를 게시해야한다고 생각합니다. –

답변

1

사용중인 부트 스트랩 버전이 열 너비를 %로 나누지 않고 부동 상태 인 것으로 보입니다. 왼쪽.

HTML에는 에 큰 문제가 있습니다. 행을 삭제 한 다음이 colums가 왼쪽, float를 만들고 그것을 % 폭의 결정하려는거야하여

<div class="row"> <!-- This wraps the column and defeats its purpose --> 
<div class="col-xs-4 wthree_about_right_grid_left"> 
    <div class="hvr-rectangle-in"> 
     <i class="glyphicon glyphicon-pencil"></i> 
    </div> 
</div> 
</div> 

시작. 이처럼

: enter image description here

그렇게함으로써, 당신은 당신의 템플릿처럼 행동하고, 궁극적으로 초기 문제를 해결하기 위해 얻을 수 있습니다.

서식 파일과 호환되는 부트 스트랩 버전을 사용하면 훨씬 많은 이점을 얻을 수 있습니다.

+0

부트 스트랩 4는 플롯을 사용하지 않고 그리드 시스템에 flexbox를 사용하고 있습니다! – tobiv

+0

맞아, 그 이유 때문에 내 대답은 양면성이다. 부트 스트랩 3 템플릿을 부트 스트랩 4와 함께 사용하는 것은 좋은 출발점이 아닙니다. –

+0

감사합니다. 나는 그것을 시도 할 것이다. 그러나 부트 스트랩 3 버전을 사용하는 것이 더 좋다고 말하면 아마 업데이트를 중단하고 원래 버전을 사용해야합니다. 내 생각은 템플릿을 최신 버전으로 가져 오는 것이 었습니다. 내가 생각한 것처럼 부트 스트랩이 더 복잡해 보입니다. :) Ah btw. 나는 열의 칼 '부츠 밧 트린 트가 있어야한다고 나에게 말했다. –