我有五行图形，上面有文字。在移动视图中，我想设置媒体查询，以便五个图形变为带文本的下拉列表。例如，图像1表示＆＃34;个人能力＆＃34;，图像2表示＆＃34;领导变更＆＃34;等等。在移动视图中，我希望图形消失，下拉列表可以选择＆ ＃34;个人能力＆＃34;，＆＃34;领导变革＆＃34;等
我的HTML：
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<div class="row" style="margin:1%">
<div class="col-xs-1">
</div>
<!--end col-sm-1-->
<div class="col-xs-2">
<a href="#">
<img src="http://placehold.it/150x150" class="img-responsive" title="Personal Capability" style="border:0">
</a>
</div>
<!--end col-sm-2-->
<div class="col-xs-2">
<a href="#">
<img src="http://placehold.it/150x150" class="img-responsive" title="Leading Change" style="border:0">
</a>
</div>
<!--end col-sm-2-->
<div class="col-xs-2">
<a href="#">
<img src="http://placehold.it/150x150" class="img-responsive" title="Character" style="border:0">
</a>
</div>
<!--end col-sm-2-->
<div class="col-xs-2">
<a href="#">
<img src="http://placehold.it/150x150" class="img-responsive" title="Interpersonal Skills" style="border:0">
</a>
</div>
<!--end col-sm-2-->
<div class="col-xs-2">
<a href="#">
<img src="http://placehold.it/150x150" class="img-responsive" title="Focus on Results" style="border:0">
</a>
</div>
<!--end col-sm-2-->
<div class="col-xs-1">
</div>
<!--end col-sm-1-->
</div>
<!--end row-->
答案 0 :(得分：2)
您可以执行此操作，因此您不必使用重复的内容。它只是使用媒体查询在某个断点上方构建一行图像/图形，然后在下拉列表出现时隐藏这些图像/图形。
下拉列表只是一个标准button dropdown。在示例中，媒体查询 @min-width：768px 用于显示图像， @ max-width：767px 用于显示下拉列表。您只需更改dropdown-menu内部的规则（因为它最终只是一个列表，因为它只是一个列表）来反映您需要的输出，如果取决于有多少图像或在其他图像中重复使用，您可以扩展一行图像具有不同数量图像的地方。
基本CSS更改
.btn-group-transform .dropdown-menu {
position: relative;
display: table;
width: 100%;
min-width: 100%;
margin: 0 auto;
padding: 0;
background: transparent;
border: none;
box-shadow: none;
border-radius: 0;
text-align: center;
}
/*Default 6 Images but the % can be changed to accomodate or use/make a helper class*/
.btn-group-transform .dropdown-menu > li {
display: inline-table;
/*Adjust the below value based on the number of list items*/
width: 16.666667%;
float: none;
/*Adjust the below value to add or remove space between list items*/
padding: 2.5px;
}
示例1; 在FullPage上打开并缩小浏览器窗口
/*Body rules are for DEMO ONLY*/
body {
padding-top: 2.5px;
}
/*Body rules are for DEMO ONLY*/
@media (min-width: 768px) {
.btn-group-transform {
position: relative;
width: 100%;
}
.btn-group-transform .dropdown-menu {
position: relative;
display: table;
width: 100%;
min-width: 100%;
margin: 0 auto;
padding: 0;
background: transparent;
border: none;
box-shadow: none;
border-radius: 0;
text-align: center;
}
/*Default 6 Images but the % can be changed to accomodate or use.make a helper class*/
.btn-group-transform .dropdown-menu > li {
display: inline-table;
/*Adjust the below value based on the number of list items*/
width: 16.666667%;
float: none;
/*Adjust the below value to add or remove space between list items*/
padding: 2.5px;
}
/*If you want to extend this for a different number of images use these helpers or add new ones*/
/*5 Images*/
.btn-group-transform .dropdown-menu > li.list-5 {
width: 20%;
}
/*4 Images*/
.btn-group-transform .dropdown-menu > li.list-4 {
width: 25%;
}
/*If you want to extend this for a different number of images use the above helpers or add new ones*/
.btn-group-transform .dropdown-menu > li > a {
background: none;
transition: all 300ms linear;
padding: 0;
}
.btn-group-transform .dropdown-menu > li > a > img {
max-width: 100%;
height: auto;
margin: auto;
}
.btn-group-transform .dropdown-menu > li > a:hover {
opacity: 0.5;
}
.btn-group-transform button,
.btn-group-transform span {
display: none;
}
}
@media (max-width: 767px) {
/*Body rules are for DEMO ONLY*/
body {
text-align: center;
}
/*Body rules are for DEMO ONLY*/
.btn-group-transform img {
display: none;
}
}<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<div class="btn-group btn-group-transform">
<button type="button" class="btn btn-default dropdown-toggle dropdown-toggle-transform" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Dropdown <span class="caret"></span>
</button>
<ul class="dropdown-menu">
<li>
<a href="#">
<img src="http://placehold.it/1000x1000/F21115/fff?text=ONE"> <span>Personal Capability</span>
</a>
</li>
<li>
<a href="#">
<img src="http://placehold.it/1000x1000/F21115/fff?text=TWO"> <span>Leading Change</span>
</a>
</li>
<li>
<a href="#">
<img src="http://placehold.it/1000x1000/F21115/fff?text=THREE"> <span>Character</span>
</a>
</li>
<li>
<a href="#">
<img src="http://placehold.it/1000x1000/F21115/fff?text=FOUR"> <span>Interpersonal Skills</span>
</a>
</li>
<li>
<a href="#">
<img src="http://placehold.it/1000x1000/F21115/fff?text=FIVE"> <span>Focus on Results</span>
</a>
</li>
<li>
<a href="#">
<img src="http://placehold.it/1000x1000/F21115/fff?text=SIX"> <span>Something Else</span>
</a>
</li>
</ul>
</div>
<div class="btn-group btn-group-transform">
<button type="button" class="btn btn-default dropdown-toggle dropdown-toggle-transform" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Dropdown <span class="caret"></span>
</button>
<ul class="dropdown-menu">
<li class="list-5">
<a href="#">
<img src="http://placehold.it/600x600/000/fff?text=ONE"> <span>Personal Capability</span>
</a>
</li>
<li class="list-5">
<a href="#">
<img src="http://placehold.it/600x600/000/fff?text=TWO"> <span>Leading Change</span>
</a>
</li>
<li class="list-5">
<a href="#">
<img src="http://placehold.it/600x600/000/fff?text=THREE"> <span>Character</span>
</a>
</li>
<li class="list-5">
<a href="#">
<img src="http://placehold.it/600x600/000/fff?text=FOUR"> <span>Interpersonal Skills</span>
</a>
</li>
<li class="list-5">
<a href="#">
<img src="http://placehold.it/600x600/000/fff?text=FIVE"> <span>Focus on Results</span>
</a>
</li>
</ul>
</div>
<div class="btn-group btn-group-transform">
<button type="button" class="btn btn-default dropdown-toggle dropdown-toggle-transform" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Dropdown <span class="caret"></span>
</button>
<ul class="dropdown-menu dropdown-menu-right">
<li class="list-4">
<a href="#">
<img src="http://placehold.it/600x600/176B99/fff?text=ONE"> <span>Personal Capability</span>
</a>
</li>
<li class="list-4">
<a href="#">
<img src="http://placehold.it/600x600/176B99/fff?text=TWO"> <span>Leading Change</span>
</a>
</li>
<li class="list-4">
<a href="#">
<img src="http://placehold.it/600x600/176B99/fff?text=THREE"> <span>Character</span>
</a>
</li>
<li class="list-4">
<a href="#">
<img src="http://placehold.it/600x600/176B99/fff?text=FOUR"> <span>Interpersonal Skills</span>
</a>
</li>
</ul>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
如果您想实际使用菜单中显示的文字来覆盖图片，请添加以下规则：
.btn-group-transform .dropdown-menu > li > a > span {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
color: white;
font-weight: bold;
letter-spacing: 1.25px;
font-size: 20px;
white-space: pre-wrap;
}
示例2： 在FullPage上打开并缩小浏览器窗口
/*Body rules are for DEMO ONLY*/
body {
padding-top: 2.5px;
}
/*Body rules are for DEMO ONLY*/
@media (min-width: 768px) {
.btn-group-transform {
position: relative;
width: 100%;
}
.btn-group-transform .dropdown-menu {
position: relative;
display: table;
width: 100%;
min-width: 100%;
margin: 0 auto;
padding: 0;
background: transparent;
border: none;
box-shadow: none;
border-radius: 0;
text-align: center;
}
.btn-group-transform .dropdown-menu > li {
display: inline-table;
width: 20%;
float: none;
padding: 2.5px;
}
.btn-group-transform .dropdown-menu > li > a {
background: none;
transition: all 300ms linear;
padding: 0;
position: relative;
}
.btn-group-transform .dropdown-menu > li > a > img {
max-width: 100%;
height: auto;
margin: auto;
}
.btn-group-transform .dropdown-menu > li > a:hover {
opacity: 0.5;
}
/*Add this rule to use the text inside the dropdown to add a text overlay to the images*/
.btn-group-transform .dropdown-menu > li > a > span {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
color: white;
font-weight: bold;
letter-spacing: 1.25px;
font-size: 20px;
white-space: pre-wrap;
}
.btn-group-transform button {
display: none;
}
}
@media (max-width: 767px) {
/*Body rules are for DEMO ONLY*/
body {
text-align: center;
}
/*Body rules are for DEMO ONLY*/
.btn-group-transform img {
display: none;
}
}<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<div class="btn-group btn-group-transform">
<button type="button" class="btn btn-default dropdown-toggle dropdown-toggle-transform" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Dropdown <span class="caret"></span>
</button>
<ul class="dropdown-menu">
<li>
<a href="#">
<img src="http://placehold.it/600x600/05A3F7/05A3F7"> <span>Personal Capability</span>
</a>
</li>
<li>
<a href="#">
<img src="http://placehold.it/600x600/05A3F7/05A3F7"> <span>Leading Change</span>
</a>
</li>
<li>
<a href="#">
<img src="http://placehold.it/600x600/05A3F7/05A3F7"> <span>Character</span>
</a>
</li>
<li>
<a href="#">
<img src="http://placehold.it/600x600/05A3F7/05A3F7"> <span>Interpersonal Skills</span>
</a>
</li>
<li>
<a href="#">
<img src="http://placehold.it/600x600/05A3F7/05A3F7"> <span>Focus on Results</span>
</a>
</li>
</ul>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
答案 1 :(得分：0)
Bootstrap提供响应式实用程序。您可以根据屏幕隐藏或显示某些类。
如果我了解您的问题，您只想在移动设备上显示某些内容，而在其他设备上显示其他内容。
Bootstrap有适合你的东西，可见和隐藏的类。
在这个JSFiddle中，您可以找到这些类的示例：https://jsfiddle.net/valentinho14/9f4b53yw/
此外，请不要仅使用空块来推送内容，例如：
<div class="col-xs-1"></div>
如果您选择使用为其创建的类（偏移量）会更好：
<div class="col-xs-2 col-xs-offset-1">
Your content
</div>
要获得更多相关信息，请查看官方bootstrap的文档：http://getbootstrap.com/css/#responsive-utilities