Question

引导程序是否可以在移动设备上使用不同的宽度然后在桌面上？我的桌面页面的全宽为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.

Answer 1

您可以使用容器 - 液体而不是容器。容器的宽度为1200px，当您在桌面上使用更大的分辨率时，这将不是80％。

如果要仅覆盖桌面或移动设备的.container行为。你可以使用媒体查询。

您还可以使用引导类隐藏其他设备的某些内容。

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

我希望桌面占据屏幕的80％。

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

Answer 2

实现您的要求的更好方法是使用bootstrap偏移类。它将附加一个偏移量作为指定的宽度和分辨率。

以下是示例代码

＆＃13;

<!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>

＆＃13;

您可以找到有关偏移类here的更多信息。

Answer 3

<!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>

Bootstrap不同的容器宽度移动

3 个答案: