twitter-bootstrap-3 相关问题

我有与此类似的 HTML：公告我有与此类似的 HTML： <div class="table-responsive"> <table class="table borderless"> <caption> <h3>Announcements</h3> </caption> <tbody> <tr > <td> If you are waiting for your certificate from your trainer, please contact them. Our turnaround time is between 1-2 months from the time we receive your details from your trainer, which we expect to be at the start of your program. The remainder is dependent upon how quickly your trainer has send in all the required paperwork and made payment, etc. </td> </tr> </tbody> </table> </div> 当我在小视口中查看输出时，表格会正确调整大小，但表格单元格中的段落内容不会换行，因此会显示滚动条。我预计响应行为会包裹段落内容。我该如何实现这一目标？只需简单地使用如下所示，它就会自动换行表格中的任何长文本。不需要别的 <td style="word-wrap: break-word;min-width: 160px;max-width: 160px;">long long comments</td> 因此您可以使用以下内容： td { white-space: normal !important; // To consider whitespace. } 如果这不起作用： td { white-space: normal !important; word-wrap: break-word; } table { table-layout: fixed; } 我遇到了与您相同的问题，但上述答案没有解决我的问题。我能够解决这个问题的唯一方法是创建一个类并使用特定的宽度来触发我的特定用例的包装。作为示例，我在下面提供了一个片段 - 但我发现您需要针对相关表格调整它 - 因为我通常根据布局使用多个 colspan。我认为 Bootstrap 失败的原因是因为它消除了包装约束以获得滚动条的完整表格。 colspan 一定是把它绊倒了。 <style> @media (max-width: 768px) { /* use the max to specify at each container level */ .specifictd { width:360px; /* adjust to desired wrapping */ display:table; white-space: pre-wrap; /* css-3 */ white-space: -moz-pre-wrap; /* Mozilla, since 1999 */ white-space: -pre-wrap; /* Opera 4-6 */ white-space: -o-pre-wrap; /* Opera 7 */ word-wrap: break-word; /* Internet Explorer 5.5+ */ } } 我希望这有帮助该行为是故意的：通过将任何 .table 包装在 .table-responsive 中来创建响应式表格使它们在小型设备上水平滚动（768px 以下）。当查看宽度大于 768 像素的任何内容时，您不会在这些表格中看到任何差异。这意味着表格默认是响应式的（正在调整其大小）。但前提是您希望在没有足够空间时不破坏表格线条并添加滚动条，请使用 .table-responsive 类。如果您查看 bootstrap 的源代码，您会注意到有一个媒体查询仅在 XS 屏幕尺寸上激活，并将表格文本设置为 white-space: nowrap，这会导致其不会中断。 TL;博士;解决方案只需从 html 代码中删除 .table-responsive 元素/类即可。编辑我认为你的桌子一开始没有响应的原因是你没有包装像这样的 .container、.row 和 .col-md-x 类 <div class="container"> <div class="row"> <div class="col-md-12">  <div class="table-responsive"> <div class="table"> </div> </div> </div> </div> </div> 有了这个，您仍然可以使用 <p> 标签，甚至使其响应。请参阅 Bootply 示例此处 UberNeo 的回复是好的，我喜欢它，因为除了 TD 之外，你不需要修改任何其他内容。唯一的一点是，您还必须在样式中添加“white-space:normal”，以保持表格的响应特性，如果没有，在某些分辨率下，不会进行换行，表格也不会滚动出现。 style="word-wrap: break-word;min-width: 160px;max-width: 160px;white-space:normal;" .table td.abbreviation { max-width: 30px; } .table td.abbreviation p { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } <table class="table"> <tr> <td class="abbreviation"><p>ABC DEF</p></td> </tr> </table> 那么好吧。您可以使用 CSS 自动换行属性。像这样的东西： td.test /* Give whatever class name you want */ { width:11em; /* Give whatever width you want */ word-wrap:break-word; } 在 css 外部文件中使用它。 .td-table { word-wrap: break-word; word-break: break-all; white-space: normal !important; text-align: justify; } 就这样做 style="word-wrap: break-word min-width:; max-width:;" 然后设置你想要的width 在 Bootstrap 5.0 中这样做： <td class="w-50 text-break">teeeeeeeeeeeeeeest</> 您可以根据文档使用w-25或其他东西在 bootstrap 5 及以上版本中： 2024 年 3 月 5 日下午 4:20 文字现在可以正常换行。使用 table-responisve 类添加新类“tableresp”，然后在 js 文件中添加以下代码 $(".tableresp").on('click', '.dropdown-toggle', function(event) { if ($('.dropdown-menu').length) { var elm = $('.dropdown-menu'), docHeight = $(document).height(), docWidth = $(document).width(), btn_offset = $(this).offset(), btn_width = $(this).outerWidth(), btn_height = $(this).outerHeight(), elm_width = elm.outerWidth(), elm_height = elm.outerHeight(), table_offset = $(".tableresp").offset(), table_width = $(".tableresp").width(), table_height = $(".tableresp").height(), tableoffright = table_width + table_offset.left, tableoffbottom = table_height + table_offset.top, rem_tablewidth = docWidth - tableoffright, rem_tableheight = docHeight - tableoffbottom, elm_offsetleft = btn_offset.left, elm_offsetright = btn_offset.left + btn_width, elm_offsettop = btn_offset.top + btn_height, btn_offsetbottom = elm_offsettop, left_edge = (elm_offsetleft - table_offset.left) < elm_width, top_edge = btn_offset.top < elm_height, right_edge = (table_width - elm_offsetleft) < elm_width, bottom_edge = (tableoffbottom - btn_offsetbottom) < elm_height; console.log(tableoffbottom); console.log(btn_offsetbottom); console.log(bottom_edge); console.log((tableoffbottom - btn_offsetbottom) + "|| " + elm_height); var table_offset_bottom = docHeight - (table_offset.top + table_height); var touchTableBottom = (btn_offset.top + btn_height + (elm_height * 2)) - table_offset.top; var bottomedge = touchTableBottom > table_offset_bottom; if (left_edge) { $(this).addClass('left-edge'); } else { $('.dropdown-menu').removeClass('left-edge'); } if (bottom_edge) { $(this).parent().addClass('dropup'); } else { $(this).parent().removeClass('dropup'); } } }); var table_smallheight = $('.tableresp'), positioning = table_smallheight.parent(); if (table_smallheight.height() < 320) { positioning.addClass('positioning'); $('.tableresp .dropdown,.tableresp .adropup').css('position', 'static'); } else { positioning.removeClass('positioning'); $('.tableresp .dropdown,.tableresp .dropup').css('position', 'relative'); }

twitter-bootstrap responsive-design twitter-bootstrap-3 html-table

回答 13 投票 0

表格内的引导下拉列表不适用于 .table-responsive

这是现场示例的链接。 http://www.codeply.com/go/uBnL1bBs6v 从中您可以看到，当我将图层应用到...

html css twitter-bootstrap twitter-bootstrap-3

回答 5 投票 0

模板中的 Django 使用 if 标签将一个变量与数字进行比较总是给出 false

我首先使用 widthratio 标签来计算比率百分比数字并将其分配给名为 Ratio 的变量然后，当我尝试将它与 if 和 elif 标记中的整数进行比较时，if 和 elif 标记似乎......

python django twitter-bootstrap-3

回答 1 投票 0

将最小弹性框高度设置为内容的高度

当我调整窗口大小时，元素可能会突出其父元素。有什么方法可以保证： .split-content 最小高度等于其内容 + m... 当我调整窗口大小时，<input>元素可能会突出其父级<div>。有什么方法可以保证： .split-content最小高度等于内容+边距 .split-heading 与 .split-content 具有相同的高度我有以下标记： .split { display: flex; align-items: center; justify-content: center; height: 100%; } .split-heading { border-radius: 8px 0 0 8px; min-width: 3em; } .split-content { flex-grow: 1; flex-direction: column; align-items: flex-start; border-radius: 0 8px 8px 0; padding: 0 2rem; background: #ecf0f1; } <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> <div style="position:absolute; top:15px; right:15px; bottom:15px; left:15px"> <div style="display:flex; flex-direction:column; height:100%; width:100%"> <div style="position:relative; flex:1; width:100%; height:100%;"> <div style="position:absolute; top:0; right:0; bottom:0; left:0">  <div class="split split-container "> <div class="split split-heading bg-primary"> <h2> 1 </h2> </div> <div class="split split-content"> <h3>Heading</h3> <input type="text" class="form-control" placeholder="..." readonly="TRUE"> </div> </div> </div> </div> </div> </div> 只需使用网格而不是弹性 .split { display: grid; grid-template-columns: 3em 1fr; align-items: center; justify-content: center; height: 100%; } .split-heading { border-radius: 8px 0 0 8px; display: flex; align-items: center; justify-content: center; } .split-content { display: flex; flex-grow: 1; flex-direction: column; align-items: flex-start; border-radius: 0 8px 8px 0; padding: 0 2rem; background: #ecf0f1; } <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> <div style="position:absolute; top:15px; right:15px; bottom:15px; left:15px"> <div style="display:flex; flex-direction:column; height:100%; width:100%"> <div style="position:relative; flex:1; width:100%; height:100%;"> <div style="position:absolute; top:0; right:0; bottom:0; left:0">  <div class="split split-container "> <div class="split split-heading bg-primary"> <h2> 1 </h2> </div> <div class="split split-content"> <h3>Heading</h3> <input type="text" class="form-control" placeholder="..." readonly="TRUE"> </div> </div> </div> </div> </div> </div>

html css flexbox twitter-bootstrap-3

回答 1 投票 0

Bootstrap 响应式表格在 iOS 设备上无法水平滚动

我有一个带有以下标记的表格：正如文件...

css twitter-bootstrap twitter-bootstrap-3 responsive-design jasny-bootstrap

回答 3 投票 0

Bootstrap：左对齐按钮文本

如何在引导按钮内将文本左对齐？我有多个带有不同长度文本的按钮，并且所有按钮都需要具有相同的宽度。我已经使用类 col 实现了这一目标...

html css twitter-bootstrap twitter-bootstrap-3

回答 8 投票 0

引导日期时间选择器无法运行

我正在尝试优秀的 Bootstrap DateTimePicker 插件，但似乎一开始就遇到了缓冲区。页面控件显示正确，但日历按钮完全

twitter-bootstrap-3 bootstrap-datetimepicker

回答 1 投票 0

Twitter Bootstrap 3 中导航栏中的元素如何垂直居中？

我正在查看 Twitter Bootstrap 中的导航栏元素，看看它们如何将导航栏中的元素垂直居中，因为这是我一直在努力解决的问题。我总是...

html css twitter-bootstrap twitter-bootstrap-3 vertical-alignment

回答 2 投票 0

Angular 未加载引导程序

我对 Angular 相当陌生，正在尝试在项目中实现引导程序。但我无法将引导程序加载到我的项目中当我查看检查工具 --> 来源 --> CSS 时 /* src/sty...

javascript angular typescript twitter-bootstrap-3

回答 1 投票 0

Bootstrap 3：当另一个下拉菜单打开时，悬停时打开下拉菜单

我有几个 Bootstrap 3（由于我无法控制的原因必须使用它）导航栏中的下拉菜单，我希望它们表现得像应用程序菜单。通常，下拉菜单会在单击时打开，...

twitter-bootstrap-3 svelte

回答 1 投票 0

如何用光标在 <button> 元素中选择文本？

我发现了一个奇怪的行为，我无法在元素中选择文本。例如，请尝试在 Bootstrap 的这些按钮中选择文本：http://getbootstrap.com/components/#list-gr... 我发现了一个奇怪的行为，我无法在 <button> 元素中选择文本。例如，请尝试在 Bootstrap 的这些按钮中选择文本：http://getbootstrap.com/components/#list-group-buttons 这是一些标准行为还是可以编辑？我需要选择按钮中的文本。您可以做这个问题的相反操作：创建以下 CSS3： .list-group-item{ -webkit-touch-callout: text; -webkit-user-select: text; -khtml-user-select: text; -moz-user-select: text; -ms-user-select: text; user-select: text; } 并链接样式表。它适用于我的火狐浏览器。编辑：将“全部”更改为“文本”，正如 Nenad Vracar 所说。现在它可以在 Chrome 和 Firefox 中运行可以设置user-select: text button { -webkit-user-select: text; /* Chrome all / Safari all */ -moz-user-select: text; /* Firefox all */ -ms-user-select: text; /* IE 10+ */ user-select: text; } <div class="col-sm-4"> <div class="list-group"> <button type="button" class="list-group-item">Cras justo odio</button> <button type="button" class="list-group-item">Dapibus ac facilisis in</button> <button type="button" class="list-group-item">Morbi leo risus</button> <button type="button" class="list-group-item">Porta ac consectetur ac</button> <button type="button" class="list-group-item">Vestibulum at eros</button> </div> </div> 小提琴以上答案均不适用于 Safari。如果该按钮仅用于显示，并且您同意它不再发送 onClick 事件，则可以使用 pointer-events: none 使其在 Safari 中正常工作。 button { -webkit-user-select: text; /* Chrome */ -moz-user-select: text; /* Firefox */ -ms-user-select: text; /* IE 10+ */ user-select: text; pointer-events: none; /* Safari */ } 您可以像这样为按钮定义 css 属性对于按钮类添加光标：指针属性。您可以直接指定按钮或自定义 CSS 类光标：指针

css html twitter-bootstrap-3

回答 4 投票 0

如何创建双色导航栏？

我目前正在开发一个网站，我需要一个宽导航栏，其中只有三个链接/“按钮”。问题是所有所谓的按钮都是不同颜色的（附有

html css twitter-bootstrap-3 background-color navbar

回答 1 投票 0

通过 JavaScript 使用虚线参数添加表格标签

我正在尝试使用 Javascript 添加 Bootstrap Table 表标签。表标签的参数之一是数据分页。这种添加方法由于 - 而失败。我该如何解决...

javascript twitter-bootstrap-3 bootstrap-table

回答 2 投票 0

twitter-bootstrap-3 相关问题

最新问题