带有下拉菜单响应文本的引导模式
Posted
技术标签:
【中文标题】带有下拉菜单响应文本的引导模式【英文标题】：Bootstrap modal with drowdown menu responsive text 【发布时间】：2019-07-18 18:41:21 【问题描述】：我有一个带有下拉菜单的引导模式。但是，下拉菜单中的文本长度会有所不同。现在，如果屏幕很窄（移动），那么部分文本会丢失。我很好奇是否可以使文本响应。这样就删除了文本的最后一部分。如果这不可能，那么如果文本不完全可读，是否可以在底部显示一个垂直滑块？
在这个example 中，我制作了一个模型，其中下拉菜单可见。下拉菜单中的文本加长。
<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;
希望有人知道使文本可读的解决方案。
【问题讨论】：
【参考方案1】：尝试将此添加到您的 CSS 表中：
.dropdown-item
white-space : nowrap;
.dropdown-item .text
word-wrap:break-word;
.dropdown-menu.show
min-width:100%!important;
width:100%!important;
【讨论】：
您好 Hernandez，感谢您的回复！我现在确实得到了一个水平滚动条，但现在复选标记落在文本上方而不是文本末尾。您碰巧知道解决方案吗？我在这里用您的代码修改了上面的示例：jsfiddle.net/Pension007/y9bq1Lcw 你需要坚持使用那个 CSS，你会完成你的黄金 bruh！?以上是关于带有下拉菜单响应文本的引导模式的主要内容，如果未能解决你的问题，请参考以下文章