Question

我是初学者，所以希望有人可以给我一些关于我失踪的颜色。基本上，我已经开发了几个视图，当我将浏览器窗口缩小到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>

Answer 1

您只使用仅影响小屏幕的COL-SM。您需要添加类＆＃34; col-XS＆＃34;告诉bootstrap在超小屏幕上做什么。默认情况下，它是＆＃34; col-xs-12＆＃34;堆叠。

这是我为你制作的小提琴。您可以在超小屏幕尺寸上看到＆＃34;瓷砖＆＃34;将连续显示2。因为我给了他们这堂课：Col-xs-6

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

如何使用bootstrap 3对移动设备进行响应

1 个答案: