Twitter Bootstrap이 모바일 용으로 너무 넓습니다.

트위터 부트 스트랩을 사용하여 내 사이트에 간단한 디자인을했습니다. 다음과 같이 코드는 다음과 같습니다 Twitter Bootstrap이 모바일 용으로 너무 넓습니다.

<!DOCTYPE html> 

<!--[if lt IE 7 ]> <html class="ie ie6 no-js" lang="pl-PL"> <![endif]--> 
<!--[if IE 7 ]> <html class="ie ie7 no-js" lang="pl-PL"> <![endif]--> 
<!--[if IE 8 ]> <html class="ie ie8 no-js" lang="pl-PL"> <![endif]--> 
<!--[if IE 9 ]> <html class="ie ie9 no-js" lang="pl-PL"> <![endif]--> 
<!--[if gt IE 9]><!--><html class="no-js" lang="pl-PL"><!--<![endif]--> 

<head> 

    <meta charset="UTF-8"> 
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> 
    <title></title> 
    <meta name="viewport" content="width=device-width, initial-scale=1.0"> 

    <link rel="shortcut icon" href="http://localhost/images/fav.ico"> 
    <link rel="stylesheet" href="http://localhost/bootstrap.css"> 
    <link rel="stylesheet" href="http://localhost/style.css"> 

    <!--[if lt IE 9]> 
    <script src="http://localhost/js/html5shiv.js"></script> 
    <script src="http://localhost/js/respond.js"></script> 
    <![endif]--> 


    <link rel="alternate" type="application/rss+xml" title=" &raquo; Kanał z wpisami" href="http://localhost/feed/" /> 
<link rel="alternate" type="application/rss+xml" title=" &raquo; Kanał z komentarzami" href="http://localhost/comments/feed/" /> 
<link rel='stylesheet' id='contact-form-7-css' href='http://localhost/wp-content/plugins/contact-form-7/includes/css/styles.css?ver=3.2' type='text/css' media='all' /> 
<script type='text/javascript' src='http://localhost/wp-includes/js/jquery/jquery.js?ver=1.8.3'></script> 
<style type="text/css"> 
sup { 
    vertical-align: 60%; 
    font-size: 75%; 
    line-height: 100%; 
} 
sub { 
    vertical-align: -10%; 
    font-size: 75%; 
    line-height: 100%; 
} 
.amp { 
    font-family: Baskerville, "Goudy Old Style", "Palatino", "Book Antiqua", "Warnock Pro", serif; 
    font-weight: normal; 
    font-style: italic; 
    font-size: 1.1em; 
    line-height: 1em; 
} 
.caps { 
    font-size: 90%; 
} 
.dquo { 
    margin-left:-.40em; 
} 
.quo { 
    margin-left:-.2em; 
} 
/* because formatting .numbers should consider your current font settings, we will not style it here */ 
</style> 
    <style type="text/css">.recentcomments a{display:inline !important;padding:0 !important;margin:0 !important;}</style> 
</head> 

<body class="home blog">  
    <div id="wrap" class="container"> 
     <!-- #header --> 
     <header id="header" class="span12"> 
      <div class="navbar"> 
       <div class="navbar-inner"> 
        <div class="container"> 
         <h1 class="brand"><a href="http://localhost"></a></h1> 
         <div class="nav-collapse collapse hidden-mobile"> 
          <ul class="nav pull-right"> 
           <li><a href="#about" title="O mnie">O mnie</a></li> 
           <li><a href="#showcase" title="Realizacje">Realizacje</a></li> 
           <li><a href="#contact" title="FAQ/Kontakt">FAQ i kontakt</a></li> 
          </ul> 
         </div> 
        </div> 
       </div> 
      </div> 
     </header> 
     <!-- /#header --> 


<!-- #slider --> 
<section id="slider" class="hidden-phone carousel slide"> 
    <div> 
     <article class="item"></article> 
     <article class="item"></article> 
    </div> 
</section> 


    </div> 

    <script type='text/javascript' src='http://localhost/wp-content/plugins/contact-form-7/includes/js/jquery.form.js?ver=3.09'></script> 
<script type='text/javascript'> 
/* <![CDATA[ */ 
var _wpcf7 = {"loaderUrl":"http:\/\/192.168.1.2\/\/wp-content\/plugins\/contact-form-7\/images\/ajax-loader.gif","sending":"Wysy\u0142anie..."}; 
/* ]]> */ 
</script> 
<script type='text/javascript' src='http://localhost/wp-content/plugins/contact-form-7/includes/js/scripts.js?ver=3.2'></script> 
<script src="http://localhost/js/jquery.js"></script> 
<script src="http://localhost/js/bootstrap.min.js"></script> 
<script src="http://localhost/js/plugins.js"></script> 
<script src="http://localhost/js/script.js"></script> 

<!-- 

<script> 

    var _gaq = _gaq || []; 
    _gaq.push(['_setAccount', 'UA-XXXXXX-XX']); 
    _gaq.push(['_trackPageview']); 

    (function() { 
    var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true; 
    ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js'; 
    var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s); 
    })(); 

</script> 
--> 

</body> 

</html>

나는 부트 스트랩의 두 CSS 파일을 포함했다 (하나로 결합 - 제 부트 스트랩 - responsive.css 다음 bootstrap.css)를 바닥에와 bootstrap.js. 그러나 나는 매우 이상한 문제가있다. (처음으로 Twitter Bootstrap을 사용한 이후로) - 내 전화기 (Huawei Ascend) 몸체가 너무 넓다. (방향에 상관없이). 그것은 약간의 패딩을 가지고있는 것처럼 보였습니다 - 그래서 body의 패딩을 제거했지만 도움이되지 않았습니다. CSS를 제거하고 부트 스트랩 만 유지하더라도 문제가 표시됩니다.

출처

2013-03-18 Tomek Buszewski

모바일에서 이와 같은 Bootstrap의 데모 페이지를 보는 데 동일한 문제가 발생합니까? http://twitter.github.com/bootstrap/examples/fluid.html –

아니요 - 그게 문제입니다. 나는 다른 두 개의 전화 (삼성, 갤럭시 551 및 갤럭시 II 둘 다)를 확인했고 그것은 동일합니다. –

header 태그에서 class = "span12"를 삭제 해보세요 ... 거기에 연속적으로 있지 않으므로 어쩌면 깨뜨릴 수 있습니까? –

은

.container { width: 100% !important }

도움이 설정을 선택합니다. 나는 아직도 이것이 심지어 일어난 이유를 모른다.

출처

2013-03-20 15:25:09

아주 나쁜 문제입니다. 그것이 있지만,

출처

2013-03-20 19:06:29

지금까지 단 하나뿐입니다. 만약'container'를'100 %'로 설정하는 것을 피하는 아이디어가 있다면 그것을 듣고 싶습니다. (정말로, sarcarm :)). –

부트 스트랩 버전이 질문에 지정되지 않았습니다 ... 100 % 폭을 설정

이 선 아래로 당신에게 다른 두통을 줄 것이다 ... .container-fluid에 .container를 변경 시도하고 무슨 일이 일어 나는지 v3.0이 출시되기 전에 게시되었습니다.

누구나이 주제를 접하게되고 v3.x에서 이와 동일한 문제가 발생하는 경우, 여기에 제가 한 일이 있습니다. 당신의 .container의 div의이 < 몸 > 여부를 아래에 직접 제공 여부에 따라 YMMV는 ..

/* Fix for viewport being too wide below smallest breakpoint */ 
@media (max-width: 767px) { 
    body > .container { overflow: hidden; } /* fix */ 
    body > .container > * { overflow: visible; } /* reset back to normal */ 
}

출처

2013-11-07 13:48:53 Tanuki

.container-fluid에 .container를 변경하고 .container-fluid의 직접적인 자식으로 <div class="row-fluid">를 추가하십시오.

출처

2013-12-02 18:09:08 ashack

Twitter Bootstrap이 모바일 용으로 너무 넓습니다.

답변

관련 문제