个人中心
gpt4 book ai didi

jquery - 带有下拉菜单响应文本的 Bootstrap 模态

转载 作者：太空宇宙 更新时间：2023-11-04 06:03:16 25 4
gpt4 key购买 nike

我有一个带有下拉菜单的 Bootstrap 模式。但是，下拉菜单中文本的长度会有所不同。现在，如果屏幕很窄(移动)，那么部分文本会丢失。我很好奇是否可以使文本响应。这样就删除了文本的最后一部分。如果这不可能，那么在文本不完全可读的情况下是否可以在底部可视化一个垂直 slider ？

在此example我制作了一个可以看到下拉菜单的模型。下拉菜单中的文本变得特别长。

HTML

<html class="no-js">


  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="description" content="">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.13.1/css/bootstrap-select.css" />

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.bundle.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.13.1/js/bootstrap-select.min.js"></script>

  </head>

  <body>
    <!-- Button trigger modal -->
    <a class="btn color_orange_gradient" id="button" href="#" data-toggle="modal" data-target="#basicModal">
                    <i class="fas fa-sliders-h fa-lg"> Modal</i></a>

    <!-- Modal -->
    <div class="modal fade" id="basicModal" tabindex="-1" role="dialog" aria-labelledby="basicModal" aria-hidden="true">
      <div class="modal-dialog">
        <div class="modal-content">
          <div class="modal-header color_orange_gradient text-center">
            <h4 class="modal-title w-100 text-white" id="myModalLabel">Some data</h4>
            <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">×</span>
        </button>
          </div>
          <div class="modal-body">
            <div class="extra-controls" id="debug">
              Dropdown menu
            </div>
            <select class="selectpicker" multiple data-live-search="true">
  <option>Very long text needs to be shorten when in mobile view</option>
  <option>Very long text needs to be shorten when in mobile view</option>
  <option>Very long text needs to be shorten when in mobile view</option>
</select>
          </div>
        </div>
      </div>
    </div>


  </body>

</html>

CSS

#shadow:hover {
  box-shadow: 0 5px 11px 0 rgba(0, 0, 0, 0.18), 0 4px 15px 0 rgba(0, 0, 0, 0.15);
}

.color_orange_gradient {
  background: #f46b45;
  /* fallback for old browsers */
  background: -webkit-linear-gradient(to right, #eea849, #f46b45);
  /* Chrome 10-25, Safari 5.1-6 */
  background: linear-gradient(to right, #eea849, #f46b45);
  /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
}

.color_orange {
  background: #f46b45;
  /* fallback for old browsers */
}

.color_orange:hover {
  background-color: #f7977c !important;
}

希望有人知道使文本可读的解决方案。

最佳答案

尝试将此添加到您的 CSS 表中:

.dropdown-item{
  white-space : nowrap;
}
.dropdown-item .text {
  word-wrap:break-word;
}
.dropdown-menu.show{
  min-width:100%!important;
  width:100%!important;
}

关于jquery - 带有下拉菜单响应文本的 Bootstrap 模态，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/57100817/

25 4 0
文章推荐： linux - 来自键盘的变量等于bash
文章推荐： python - 模式中的 Formencode 复合验证器
文章推荐： python - 使用 Tkinter 在一个窗口中随机显示图像
文章推荐： c - Backspace 不删除字符，类似于 BASH
太空宇宙
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com