如何使用 bootstrap 3 使视图响应移动设备答案

【问题标题】：How to make view responsive to mobile devices with bootstrap 3如何使用 bootstrap 3 使视图响应移动设备
【发布时间】：2016-06-04 12:26:04
【问题描述】：

我是 bootstrap 的新手，所以希望有人能给我一些关于我所缺少的东西的颜色。基本上，我已经开发了几个视图，当我将浏览器窗口缩小到 768 X 1024 以上时，我的元素会自动扩展到视图的 100%，并且图像会全部变形。

这是 768 X 1024 时的样子：

当我进一步缩小浏览器时：

因此，此时您可以看到导航菜单和每个图块都拉伸到 100%。我想要的是瓷砖和菜单在堆叠时保持相同的宽度。这是导航面板和磁贴的 HTML：

CSS：

.typehead{
 text-align:center;
 /*height: 100px; */
 background: #3f3f3f;
 margin: -5px 0px -5px -5px !important;
 border-radius: 5px;
 font-weight: bold;
}

.myborderwrap{
border: 1px solid #000000;
border-radius: 10px;    

}

.tiles{
padding-left: 50px !important;
margin-bottom: 25px;


}

.crystalcontainer{

padding: 15px 15px 5px 15px;
border-radius: 10px;
box-shadow: -15px 15px 5px #888888;

}

.crystalname{
font-size: 12pt;
font-weight: bold;
text-align: center;
padding-bottom: 10px;
border-bottom: 1px solid #000000;
word-wrap: break-word;  


}

.ratingrow{
text-align: center;
color: #007d7d;
font-weight: bold;
font-style: italic;
}

.add{

border-radius: 10px;
text-align: center;
padding: 3px 10px 3px 10px;
margin-top: 3px;
cursor:pointer;
background: #000000;
font-size: 12pt;    

}

.cdescwindow{

position: relative;
overflow: hidden;
padding: 0px !important;
margin-bottom: 0px !important;
}

.cdesccaption{
position:absolute;
top:0;
right:0;
background:rgba(66, 139, 202, 0.75);
width:100%;
height:100%;

display: none;
text-align:center;
color:#fff !important;
z-index:2;
}

.crystaldescription{

padding-top: 5px;
font-size: 12pt;
font-weight: bold;
}

HTML：

<body>
<div class="wrap">
<nav id="w029141" class="navbar-inverse navbar-fixed-top mymenuhead navbar" role="navigation">
<div class="container">
<div class="navbar-header">
<button class="navbar-toggle" data-target="#w029141-collapse" data-toggle="collapse" type="button">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="/devfront/index.php">
<div class="row">
<img width="155px" height="55px" alt="" src="img/CMLogoSnowflake.gif">
<span style="font-style: italic; color: #f9f31c; font-size: 10pt;"> beta</span>
</div>
</a>
</div>
<div id="w029141-collapse" class="collapse navbar-collapse">
<ul id="w13562" class="navbar-nav nav" style="margin-left: 100px;">
<li>
<a href="/devfront/index.php?r=dev">DEV</a>
</li>
<li class="active">
<a href="/devfront/index.php?r=find%2Fsearch">Subscribe</a>
</li>
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">
Publish
<b class="caret"></b>
</a>
<ul id="w226843" class="dropdown-menu">
<li>
<a tabindex="-1" href="/devfront/index.php?r=publish%2Fdashboard">My Published Crystals</a>
</li>
<li>
<a tabindex="-1" href="/devfront/index.php?r=publish%2Fselect-new">Publish New Crystal</a>
</li>
<li>
<a tabindex="-1" href="/devfront/index.php?r=publish%2Fprofile">Manage Profiles</a>
</li>
</ul>
</li>
</ul>
<ul id="w33960" class="navbar-nav nav">
<li>
<a href="/devfront/index.php?r=manage%2Fmanage">My Crystals</a>
</li>
</ul>
<div class="navbar-nav" style="padding-top:8px">
<div id="crystalcounter" class="badge" style="background:#ffff00; color:#000000; font-weight:bold;">2</div>
</div>
<ul id="w422097" class="navbar-nav navbar-right nav">
<li>
<a href="/devfront/index.php?r=site%2Findex">Home</a>
</li>
<li>
<a href="/devfront/index.php?r=site%2Fabout">About</a>
</li>
<li>
<a href="/devfront/index.php?r=profile%2Fview">My Profile</a>
</li>
<li>
<a data-method="post" href="/devfront/index.php?r=site%2Flogout">Logout (scottjms)</a>
</li>
</ul>
</div>
</div>
</nav>
<div class="mybackground">
<div class="container">
<div class="site-index">
<span id="soundspan"></span>
<input id="searchtype" type="hidden" value="0" name="type">
<input id="brandtype" type="hidden" value="0" name="btype">
<div class="text-left"> </div>
</div>
<div class="body-content">
<div class="row searcharea">
<div class="col-sm-3"></div>
<div class="col-sm-5" style="padding-right:0px">
<input id="crystalsearchbar" class="searchbar" type="text" placeholder="Find a crystal..." name="crystalsearch">
</div>
<div class="col-sm-1" style="padding-left:0px">
<div style="align: left; height: 42px; background-color: #3333cc; padding-left: 12px; width:50px; border-top-right-radius: 5px; border-bottom-right-radius: 5px;">
<i class="fa fa-search fa-2x" style="padding-top:5px; color:white;"></i>
</div>
</div>
<div class="col-sm-3" style="padding-left:20px">
<a class="publishrouter" href="?r=publish/select-new">
I want to publish my own!
<i class="fa fa-external-link"></i>
</a>
</div>
</div>
<div class="row">
<div class="col-sm-3" style="margin:35px 0px">
<div class="panel panel-danger">
<div class="panel-heading" style="padding: 5px 0px 5px 5px;">
<h3 class="panel-title">
<div class="row typehead">
<div class="col-sm-12">
<h4 style="color: #80ffff">Explore Crystals</h4>
</div>
</div>
</h3>
</div>
<div class="table">
<ul class="nav nav-pills nav-stacked kv-sidenav">
<li id="allheader" class="allheader">All Crystals</li>
<li id="header16" class="header">
<a class="kv-toggle" href="{url}">
<span class="opened" style="display:none">
<i class="indicator glyphicon glyphicon-chevron-down"></i>
</span>
<span class="closed">
<i class="indicator glyphicon glyphicon-chevron-right"></i>
</span>
Self Publishing
</a>
<ul class="nav nav-pills nav-stacked">
<li id="subtype1" class="subtype text-primary" style="padding:10px 0px 10px 25px; cursor:pointer;">» Blog Updates</li>
<li id="subtype29" class="subtype text-primary" style="padding:10px 0px 10px 25px; cursor:pointer;">» Social Media Posts</li>
<li id="subtype30" class="subtype text-primary" style="padding:10px 0px 10px 25px; cursor:pointer;">» My Events</li>
<li id="subtype31" class="subtype text-primary" style="padding:10px 0px 10px 25px; cursor:pointer;">» Build Your Own</li>
</ul>
</li>
<li id="header18" class="header">
<a class="kv-toggle" href="{url}">
<span class="opened" style="display:none">
<i class="indicator glyphicon glyphicon-chevron-down"></i>
</span>
<span class="closed">
<i class="indicator glyphicon glyphicon-chevron-right"></i>
</span>
Local Interest
</a>
<ul class="nav nav-pills nav-stacked">
<li id="subtype32" class="subtype text-primary" style="padding:10px 0px 10px 25px; cursor:pointer;">» Tonight's Dinner Specials</li>
<li id="subtype33" class="subtype text-primary" style="padding:10px 0px 10px 25px; cursor:pointer;">» Live Music Here</li>
</ul>
</li>
</ul>
</div>
</div>
</div>
<div class="col-sm-9">
<div class="row" style="padding-top:35px"></div>
<div id="crystal-container" class="findcrystals">
<div id="crystalcontainer88" class="col-sm-3 tiles">
<div class="myborderwrap">
<div class="crystalcontainer" style="border:4px solid #80ffff;">
<div class="row">
<div class="crystalname">Blog Updates</div>
</div>
<div class="row">
<div class="thumbnail cdescwindow">
<div class="caption cdesccaption" style="display: none;">
<div class="crystaldescription">Get updated when your ....</div>
</div>
<div class="brandlogo">
<img class="catelogueimage" alt="" src="img/crystallogos/RBsalnmeicnterfalsit84783dar93UQ.png">
</div>
</div>
</div>
<div class="row icons">
<div class="row ratingrow">Not Rated </div>
<div id="crystal88" class="add open" title="Subscribe"> Subscribe </div>
</div>
</div>
</div>
</div>
<div id="crystalcontainer132" class="col-sm-3 tiles">
<div class="myborderwrap">
<div class="crystalcontainer" style="border:4px solid #80ffff;">
<div class="row">
<div class="crystalname">My Social Media Po..</div>
</div>
<div class="row">
<div class="thumbnail cdescwindow">
<div class="caption cdesccaption" style="display: none;">
<div class="crystaldescription">Any social..</div>
</div>
<div class="brandlogo">
<img class="catelogueimage" alt="" src="img/crystallogos/RBsalnmeicnterfalsit84783dar93UQ.png">
</div>
</div>
</div>
<div class="row icons">
<div class="row ratingrow">Not Rated </div>
<div id="crystal132" class="add open" title="Subscribe"> Subscribe </div>
</div>
</div>
</div>
</div>
<div id="crystalcontainer133" class="col-sm-3 tiles">
<div class="myborderwrap">
<div class="crystalcontainer" style="border:4px solid #80ffff;">
<div class="row">
<div class="crystalname">My Events</div>
</div>
<div class="row">
<div class="thumbnail cdescwindow">
<div class="caption cdesccaption" style="display: none;">
<div class="crystaldescription">All of the upcoming...</div>
</div>
<div class="brandlogo">
<img class="catelogueimage" alt="" src="img/crystallogos/RBsalnmeicnterfalsit84783dar93UQ.png">
</div>
</div>
</div>
<div class="row icons">
<div class="row ratingrow">Not Rated </div>
<div id="crystal133" class="add open" title="Subscribe"> Subscribe </div>
</div>
</div>
</div>
</div>
<div id="crystalcontainer134" class="col-sm-3 tiles">
<div class="myborderwrap">
<div class="crystalcontainer" style="border:4px solid #80ffff;">
<div class="row">
<div class="crystalname">Build Your Own</div>
</div>
<div class="row">
<div class="thumbnail cdescwindow">
<div class="caption cdesccaption">
<div class="crystaldescription">Any event..</div>
</div>
<div class="brandlogo">
<img class="catelogueimage" alt="" src="img/crystallogos/RBsalnmeicnterfalsit84783dar93UQ.png">
</div>
</div>
</div>
<div class="row icons">
<div class="row ratingrow">Not Rated </div>
<div id="crystal134" class="add open" title="Subscribe"> Subscribe </div>
</div>
</div>
</div>
</div>
<div id="crystalcontainer135" class="col-sm-3 tiles">
<div class="myborderwrap">
<div class="crystalcontainer" style="border:4px solid #80ffff;">
<div class="row">
<div class="crystalname">Local Dinner Speci..</div>
</div>
<div class="row">
<div class="thumbnail cdescwindow">
<div class="caption cdesccaption" style="display: none;">
<div class="crystaldescription">Tonights dinner..</div>
</div>
<div class="brandlogo">
<img class="catelogueimage" alt="" src="img/crystallogos/RBsalnmeicnterfalsit84783dar93UQ.png">
</div>
</div>
</div>
<div class="row icons">
<div class="row ratingrow">Not Rated </div>
<div id="crystal135" class="add open" title="Subscribe"> Subscribe </div>
</div>
</div>
</div>
</div>
<div id="crystalcontainer138" class="col-sm-3 tiles">
<div class="myborderwrap">
<div class="crystalcontainer" style="border:4px solid #80ffff;">
<div class="row">
<div class="crystalname">Local Live Music E..</div>
</div>
<div class="row">
<div class="thumbnail cdescwindow">
<div class="caption cdesccaption" style="display: none;">
<div class="crystaldescription">Live music events ..</div>
</div>
<div class="brandlogo">
<img class="catelogueimage" alt="" src="img/crystallogos/RBsalnmeicnterfalsit84783dar93UQ.png">
</div>
</div>
</div>
<div class="row icons">
<div class="row ratingrow">Not Rated </div>
<div id="crystal138" class="add open" title="Subscribe"> Subscribe </div>
</div>
</div>
</div>
</div>
<div id="crystalcontainer145" class="col-sm-3 tiles">
<div class="myborderwrap">
<div class="crystalcontainer" style="border:4px solid #ffff00;">
<div class="row">
<div class="crystalname">Black Dog Dinner S..</div>
</div>
<div class="row">
<div class="thumbnail cdescwindow">
<div class="caption cdesccaption">
<div class="crystaldescription">Our daily ..</div>
</div>
<div class="brandlogo">
<img class="catelogueimage" alt="" src="img/crystallogos/2lAPaXs-EYT3iNNQFh0a3hxIl.png">
</div>
</div>
</div>
<div class="row icons">
<div class="row ratingrow">Not Rated </div>
<div id="crystal145" class="add branded" title="Subscribe"> Subscribe </div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div>

【问题讨论】：

请发布原始 HTML 和 CSS
你的意思是呈现这个 html 的视图吗？
您发布图片的 HTML 代码，如果您发布原始 HTML 代码以及您可能应用于此页面的任何 CSS，我们将更容易进行故障排除。

标签： css twitter-bootstrap-3

【解决方案1】：

您只使用了只影响小屏幕的 COL-SM。您需要添加“col-XS”类来告诉引导程序在超小屏幕上做什么。默认情况下，它是“col-xs-12”，它是堆叠的。

这是我为你制作的小提琴。您可以在超小屏幕尺寸上看到“图块”将连续显示 2 个。因为我给他们上过这个课：Col-xs-6 https://jsfiddle.net/93bg9v2z/2/

编辑：根据您的要求，这里是新小提琴 https://jsfiddle.net/93bg9v2z/3/

【讨论】：

好的，我不确定它是否就这么简单。我真的很想在小屏幕上至少连续显示 3 个。有没有办法做到这一点，然后让它们在移动设备上堆叠 1 到一行？
是的，将所有瓦片类更改为 col-sm-4 col-xs-12 因为网格中只有 12 列，这将使小屏幕瓦片的列宽为 4，允许每行 3 个。 col-xs-12 将在移动屏幕上每行执行 1 次。 @斯科特
哦，我现在明白了..您实际上是在添加 col-xs- 类并保留 col-sm- 以便它知道在更大的屏幕上做什么。那是我没有得到的部分。谢谢！
@Scott 正确！我编辑了我的答案以包括一个这样的例子。