文档建议反馈控制台
首页
学习
活动
专区
圈层
工具
MCP广场
文章/答案/技术大牛
发布
社区首页 >问答首页 >在Bootstrap 3中，如何将一行列转换为移动视图中的下拉列表？

问在Bootstrap 3中，如何将一行列转换为移动视图中的下拉列表？
EN

Stack Overflow用户
提问于 2016-07-15 20:32:32
回答 2查看 1.2K关注 0票数 1

我有一排五个图形，上面有文字。在移动视图中，我希望设置一个媒体查询，这样五个图形就会变成一个带有文本的下拉列表。例如，图像1表示“个人能力”，图像2表示“引导更改”等。在移动视图中，我希望图形消失，下拉列表有“个人能力”、“领导更改”等选项。

我的HTML：

​

代码语言：javascript
复制
<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-->

​

html
twitter-bootstrap
mobile
responsive-design
media-queries
EN

回答 2

Stack Overflow用户

回答已采纳

发布于 2016-07-15 21:07:04

引导程序提供响应实用程序。有些类可以根据屏幕隐藏或显示某些内容。

如果我理解您的问题，您只想在移动设备上显示一些东西，在其他设备上显示其他东西。

引导程序为您提供了一些东西，可见的和隐藏的类。

在这个JSFiddle中，您可以找到这些类的一个示例：https://jsfiddle.net/valentinho14/9f4b53yw/

此外，请不要只使用空块来推送内容，例如：

代码语言：javascript
复制
<div class="col-xs-1"></div>

如果您选择使用为此创建的类(偏移量)，情况会更好：

代码语言：javascript
复制
<div class="col-xs-2 col-xs-offset-1">
    Your content
</div>

要获得更多关于这方面的信息，请查看官方的引导文件：http://getbootstrap.com/css/#responsive-utilities

票数 0
EN

Stack Overflow用户

发布于 2016-07-19 15:51:53

您可以这样做，这样您就不必使用重复的内容。它只是使用媒体查询在某个断点上构建一行图像/图形，然后在下拉显示时隐藏这些图像/图形。

下拉列表只是一个标准的按钮下拉。在本例中，使用媒体查询@ min:768 max显示图像，使用@ max-：767 max显示下拉列表。您只需更改dropdown-menu内部的规则(因为它最终只是一个列表)来反映您需要的输出，这是一列图像，如果取决于有多少图像或在其他地方重复使用不同数量的图像，则可以扩展这些图像。

Basic CSS更改

代码语言：javascript
复制
.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并减少浏览器窗口

​

代码语言：javascript
复制
/*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;
  }
}
代码语言：javascript
复制
<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>

​

如果要实际使用将显示在菜单中的文本来覆盖图像，请添加以下规则：

代码语言：javascript
复制
.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并减少浏览器窗口

​

代码语言：javascript
复制
/*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;
  }
}
代码语言：javascript
复制
<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>

​

票数 2
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：

https://stackoverflow.com/questions/38404604

复制
相关文章

相似问题

领券

腾讯云开发者

扫码关注腾讯云开发者

扫码关注腾讯云开发者

领取腾讯云代金券

热门产品

热门推荐

更多推荐

Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有 

深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 粤公网安备44030502008569号

腾讯云计算（北京）有限责任公司 京ICP证150476号 |  京ICP备11018762号

问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档