ブートストラップの異なるコンテナの幅モバイル

ブートストラップでは、モバイルでデスクトップと異なる幅を持つことは可能ですか？私のデスクトップページは80％（両面10％）の全幅を持っていますが、モバイルでは全幅が欲しいだけです。ここでは一例であり、デスクトップには、次のようになりますブートストラップの異なるコンテナの幅モバイル

しかし、モバイル/タブレットには、次のようになります。

は全幅でモバイル版を持っているために、ブートストラップが、それのようなデスクトップ上のことが可能です写真にはありますか？ここでJSfiddleはここ

をjsfiddle.net/p9nu7r63である私のHTMLです：

<!DOCTYPE html> 
<html lang="en"> 
<head> 
<title>Servicepunt Detailhandel Groningen | Home</title> 
<link rel="shortcut icon" href="images/favicon/favicon.png" type="image/png"> 
<meta charset="UTF-8"> 
<meta name="viewport" content="width=device-width, initial-scale=1"> 
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css"> 
<link rel="stylesheet" href="css/style.css?<?php echo date('l jS \of F Y h:i:s A'); ?>"/> 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script> 
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script> 
<script src="javascript/jquery-1.11.3.min.js" type="text/javascript"></script> 
<script src="javascript/jssor.slider-21.1.6.mini.js" type="text/javascript"></script> 
<script src="javascript/script.js"></script> 
</head> 
<body> 
<body> 
<div class="container-fluid"> 
<!-- NAVIGATIE BALK --> 
<nav class="navbar navbar-default" role="navigation"> 
<!-- logo --> 
<div class="navbar-header"> 
    <!-- --> 
    <a class="navbar-brand" href="index.php"> 
    <!-- <img src="images/logo.png" alt="" style="width: 50px; height: 60px;"> --> 
    </a> 

    <!-- Inklappbaar ding als je op mobiel zit--> 
    <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#mainnavbar"> 
    <span class="icon-bar"></span> 
    <span class="icon-bar"></span> 
    <span class="icon-bar"></span> 
    </button> 
</div> 

<!-- menu eitems linker kant--> 
<div class="collapse navbar-collapse" id="mainnavbar"> 
    <ul class="nav navbar-nav navbar-right"> 

    <li class="active"><a href="index.php">Home</a></li> 
    <li><a href="paginas/Over/index.php">Over</a></li> 
    <li><a href="paginas/Nieuws/index.php">Nieuws</a></li> 
    <li><a href="paginas/Contact/index.php">Contact</a></li> 

    <!-- Dropdown --> 
    <!-- 
    <li class="dropdown"> 
     <a href="#" class="dropdown-toggle" data-toggle="dropdown">Profiel <span class="caret"></span></a> 
     <ul class="dropdown-menu"> 
      <li><a href="#">Profiel</a></li> 
      <li><a href="#">Instellingen</a></li> 
     </ul> 
    </li> 
    --> 
    <!-- <li><button type="button" class="btn btn-primary btn-lg raised">Niet beschikbaar</button></li> --> 
    </ul> 

</div> 
    <!-- Aan de rechterkant --> 


</nav> 

<!-- EINDE NAVIAGTIE BALK--> 

<div id="jssor_1" style="position: relative; margin: 0 auto; top: 0px; left: 0px; width: 1300px; height: 500px; overflow: hidden; visibility: hidden;"> 
<!-- Loading Screen --> 
<div data-u="loading" style="position: absolute; top: 0px; left: 0px;"> 
    <div style="filter: alpha(opacity=70); opacity: 0.7; position: absolute; display: block; top: 0px; left: 0px; width: 100%; height: 100%;"></div> 
    <div style="position:absolute;display:block;background:url('img/loading.gif') no-repeat center center;top:0px;left:0px;width:100%;height:100%;"></div> 
    </div> 
<div data-u="slides" style="cursor: default; position: relative; top: 0px; left: 0px; width: 1300px; height: 500px; overflow: hidden;"> 
    <div data-p="225.00"> 
     <img data-u="image" src="images/red.jpg" /> 
     <div style="position: absolute; top: 30px; left: 30px; width: 1000px; height: 120px; font-size: 50px; color: #ffffff; line-height: 60px; font-family:Open Sans;">Welkom bij Servicepunt Detailhandel Groningen</div> 
     <div style="position: absolute; top: 300px; left: 30px; width: 480px; height: 120px; font-size: 30px; color: #ffffff; line-height: 38px;">Hier kom dan allemaal tekst, een kleine samenvatting van het bedrijf</div> 
     <!-- <div data-u="caption" data-t="0" style="position: absolute; top: 120px; left: 650px; width: 470px; height: 220px;"> 
      <img style="position: absolute; top: 0px; left: 0px; width: 470px; height: 220px;" src="img/c-phone-horizontal.png" /> 
      <div style="position: absolute; top: 4px; left: 45px; width: 379px; height: 213px; overflow: hidden;"> 
       <img data-u="caption" data-t="1" style="position: absolute; top: 0px; left: 0px; width: 379px; height: 213px;" src="img/c-slide-1.jpg" /> 
       <img data-u="caption" data-t="2" style="position: absolute; top: 0px; left: 379px; width: 379px; height: 213px;" src="img/c-slide-3.jpg" /> 
      </div> 
      <img style="position: absolute; top: 4px; left: 45px; width: 379px; height: 213px;" src="img/c-navigator-horizontal.png" /> 
      <img data-u="caption" data-t="3" style="position: absolute; top: 740px; left: 1600px; width: 257px; height: 300px;" src="img/c-finger-pointing.png" /> 
     </div> --> 
    </div> 
    <div data-p="225.00" style="display: none;"> 
     <img data-u="image" src="images/purple.jpg" /> 
    </div> 
    <a data-u="any" href="http://www.jssor.com" style="display:none">Full Width Slider</a> 
    <div data-p="225.00" data-po="80% 55%" style="display: none;"> 
     <img data-u="image" src="images/blue.jpg" /> 
    </div> 
    <div data-p="225.00" style="display: none;"> 
     <img data-u="image" src="images/green.jpg" /> 
    </div> 
</div> 
<!-- Bullet Navigator --> 
<div data-u="navigator" class="jssorb05" style="bottom:16px;right:16px;" data-autocenter="1"> 
    <!-- bullet navigator item prototype --> 
    <div data-u="prototype" style="width:16px;height:16px;"></div> 
</div> 
<!-- Arrow Navigator --> 
<span data-u="arrowleft" class="jssora22l" style="top:0px;left:8px;width:40px;height:58px;" data-autocenter="2"></span> 
<span data-u="arrowright" class="jssora22r" style="top:0px;right:8px;width:40px;height:58px;" data-autocenter="2"></span> 
</div> 

<div class="header"> 
<h1>home</h1> 
</div> 

<div class="" id="footer"> 
footer 
</div> 
</div> 
</body> 
</html>

CSS：

textarea { 
font-family: "Verdana"; 
resize: none; 
width: 400px; 
height: 50px; 
} 

label { 
font-weight: normal; 
} 
input { 
font-weight: normal; 
} 

h1 { 
margin: 0; 
} 

body { 
background-color: grey; 
} 

.container-fluid { 
margin: 0; 
padding: 0; 
} 

.navbar-default { 
width: 100%; 
background-color: white; 
box-shadow: 20px; 
padding: 15px; 
margin: 0; 
border-radius: 0; 
border: none; 
font-size: 25px; 
-webkit-box-shadow: 0 5px 3px -2px #5b5b5b; 
    -moz-box-shadow: 0 5px 3px -2px #5b5b5b; 
     box-shadow: 0 5px 3px -2px #5b5b5b; 
} 

.navbar-header{ 
right: auto; 
} 

.navbar-nav > li{ 
} 

.navbar-default .navbar-brand, 
.navbar-default .navbar-brand:hover, 
.navbar-default .navbar-brand:focus { 
    color: black; 
    font-size: 30px; 

} 

.navbar-default .navbar-nav > li > a { 
    color: black; 
} 

.navbar-default .navbar-nav > li > a:hover, 
.navbar-default .navbar-nav > li > a:focus { 
    color: black; 
    opacity: 0.5; 

} 

.navbar-default .navbar-nav > .active > a, 
.navbar-default .navbar-nav > .active > a:hover, 
.navbar-default .navbar-nav > .active > a:focus { 
    color: black; 
    background-color: transparent; 
} 

.navbar-default .navbar-text { 
    color: #FFF; 
} 

.navbar-default .navbar-toggle { 
border-color: none; 
} 

.icon-bar { 
} 

.navbar-default .navbar-toggle:hover, 
.navbar-default .navbar-toggle:focus { 
    background-color: lightgrey; 
} 

.navbar-default .navbar-toggle .icon-bar { 
    background-color: blue; 
    width: 40px; 
    height: 5px; 
    border-radius: 20px; 

} 

.navbar-collapse { 
border: 0px; 
} 

.navbar-default .navbar-collapse { 
color: #e7e7e7; 
} 

.navbar-default .navbar-collapse, .navbar-default .navbar-form { 
border-color: transparent; 
box-shadow: none; 
} 

.navbar-default .navbar-nav > li > a:hover, .navbar-default .navbar-nav > li > a:focus { 
color: blue; 
} 

#footer { 
padding: 20px; 
width: auto; 
height: 400px; 
background-color: #efefef; 
} 

.header { 
background-color: lightgrey; 
width: auto; 
height: 660px; 
} 

/* jssor slider bullet navigator skin 05 css */ 
/* 
.jssorb05 div   (normal) 
.jssorb05 div:hover  (normal mouseover) 
.jssorb05 .av   (active) 
.jssorb05 .av:hover  (active mouseover) 
.jssorb05 .dn   (mousedown) 
*/ 
.jssorb05 { 
position: absolute; 
} 
.jssorb05 div, .jssorb05 div:hover, .jssorb05 .av { 
position: absolute; 
/* size of bullet elment */ 
width: 16px; 
height: 16px; 
background: url('../images/b05.png') no-repeat; 
overflow: hidden; 
cursor: pointer; 
} 
.jssorb05 div { background-position: -7px -7px; } 
.jssorb05 div:hover, .jssorb05 .av:hover { background-position: -37px -7px; } 
.jssorb05 .av { background-position: -67px -7px; } 
.jssorb05 .dn, .jssorb05 .dn:hover { background-position: -97px -7px; } 

/* jssor slider arrow navigator skin 22 css */ 
/* 
.jssora22l     (normal) 
.jssora22r     (normal) 
.jssora22l:hover   (normal mouseover) 
.jssora22r:hover   (normal mouseover) 
.jssora22l.jssora22ldn  (mousedown) 
.jssora22r.jssora22rdn  (mousedown) 
.jssora22l.jssora22lds  (disabled) 
.jssora22r.jssora22rds  (disabled) 
*/ 
.jssora22l, .jssora22r { 
display: block; 
position: absolute; 
/* size of arrow element */ 
width: 40px; 
height: 58px; 
cursor: pointer; 
background: url('../images/a22.png') center center no-repeat; 
overflow: hidden; 
} 
.jssora22l { background-position: -10px -31px; } 
.jssora22r { background-position: -70px -31px; } 
.jssora22l:hover { background-position: -130px -31px; } 
.jssora22r:hover { background-position: -190px -31px; } 
.jssora22l.jssora22ldn { background-position: -250px -31px; } 
.jssora22r.jssora22rdn { background-position: -310px -31px; } 
.jssora22l.jssora22lds { background-position: -10px -31px; opacity: .3; pointer-events: none; } 
.jssora22r.jssora22rds { background-position: -70px -31px; opacity: .3; pointer- events: none; } 

@media (max-width: 1200px) { 
.navbar-header { 
    float: none; 
} 
.navbar-left,.navbar-right { 
    float: none !important; 
} 
.navbar-toggle { 
    display: block; 
} 
.navbar-collapse { 
    border-top: 1px solid transparent; 
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.1); 
} 
.navbar-fixed-top { 
    top: 0; 
    border-width: 0 0 1px; 
} 
.navbar-collapse.collapse { 
    display: none!important; 
} 
.navbar-nav { 
    float: none!important; 
    margin-top: 7.5px; 
} 
.navbar-nav>li { 
    float: none; 
} 
.navbar-nav>li>a { 
    padding-top: 10px; 
    padding-bottom: 10px; 
} 
.collapse.in{ 
    display:block !important; 
} 
} 



Thank you in advance.

出典

2016-11-28 Rainier Laan

たちとあなたのコードを共有したり、より良いフィドルを作成してください。 –

https://jsfiddle.net/p9nu7r63/ –

あなたは、コンテナ流体の代わりのコンテナを使用することができます。コンテナの幅は1200ピクセルです。デスクトップでより大きい解像度を使用する場合、コンテナのサイズは80％になりません。

デスクトップまたはモバイルのみの.containerの動作をオーバーライドする場合は、メディアクエリを使用できます。

ブートストラップクラスを使用して、他のデバイスの特定のコンテンツを非表示にすることもできます。

<div class="container visible-xs"> <!-- content for mobile only -->

私はデスクトップが画面の80％を占めるようにします。

@media (min-width:1025px) { .container { width: 80% !important;} }

出典

2016-11-28 08:52:09 mausinc

モバイル解像度では、「.container」と「.container-fluid」は同じように動作します。それらは 'bootstrap.css'で定義された同じスタイルを持っています。解像度「sm」以上では、それらの動作は異なっている。 –

はい、私はまだ答えに取り組んでいました。 – mausinc

私はそれを本当に得ることはできませんが、私はこのすべてに慣れていますが、デスクトップ上の幅は80％ですが、モバイルでは100％私のコンテナを流体に変更しました。私のスライドショーは外れています。多分あなたに私はいくつかのコードを提供できますか？ –

あなたの要件を達成するより良い方法は、ブートストラップオフセットクラスを使用することです。指定された幅と解像度でオフセットが追加されます。ここで

は、あなたがクラス hereオフセットについての詳細を見つけることができますサンプルコード

<!DOCTYPE html> 
 
<html lang="en"> 
 

 
<head> 
 
    <title>Bootstrap Example</title> 
 
    <meta charset="utf-8"> 
 
    <meta name="viewport" content="width=device-width, initial-scale=1"> 
 
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> 
 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> 
 
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
 
    <style> 
 
     .parentcontainer { 
 
      background: #fff; 
 
      padding: 0; 
 
     } 
 
     
 
     .childcontainer { 
 
      background: #000; 
 
      height: 200px; 
 
     } 
 
    </style> 
 
</head> 
 

 
<body> 
 

 
    <div class="jumbotron text-center"> 
 
     <h1>My First Bootstrap Page</h1> 
 
     <p>Resize this responsive page to see the effect!</p> 
 
    </div> 
 

 
    <div class="col-sm-12 col-lg-12 parentcontainer"> 
 
     <div class="col-sm-12 col-lg-10 col-lg-offset-1 childcontainer"> 
 

 
     </div> 
 
    </div> 
 

 
</body> 
 

 
</html>

です。

出典

2016-11-28 08:59:02 Nitheesh

<!DOCTYPE html> 
 
<html lang="en"> 
 

 
<head> 
 
    <title>Bootstrap Example</title> 
 
    <meta charset="utf-8"> 
 
    <meta name="viewport" content="width=device-width, initial-scale=1"> 
 
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> 
 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> 
 
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
 
    <style> 
 
     .parentcontainer { 
 
      background: #fff; 
 
      padding: 0; 
 
     } 
 
     
 
     .childcontainer { 
 
      background: #000; 
 
      height: 200px; 
 
     } 
 
    </style> 
 
</head> 
 

 
<body> 
 

 
    <div class="jumbotron text-center"> 
 
     <h1>My First Bootstrap Page</h1> 
 
     <p>Resize this responsive page to see the effect!</p> 
 
    </div> 
 

 
    <div class="col-sm-12 col-lg-12 parentcontainer"> 
 
     <div class="col-sm-12 col-lg-10 col-lg-offset-1 childcontainer"> 
 

 
     </div> 
 
    </div> 
 

 
</body> 
 

 
</html>

出典

2016-12-21 03:02:07

これは、説明のない別の回答と重複しているようです。 – MJH

ブートストラップの異なるコンテナの幅モバイル

答えて

関連する問題