如何在行滚动而不是换行中创建引导列
明确地说，我希望创建的行中，每行的列总数超过12个，使列成为一个可滚动的行。为了说明我所做的尝试，这里有一个例子。html为：
<div class="container-fluid">
<div class="row">
<div class="col-3">
This is
</div>
<div class="col-9">
the first row
</div>
</div>
<div class="row">
<div class="col-6">
This is
</div>
<div class="col-6">
the second row
</div>
</div>
<!-- This should scroll -->
<div class="row schedule">
<!-- This is the header row -->
<div class="row">
<div class="col-3">
Employee Name:
</div>
<div class="col-3">
First Day:
</div>
<div class="col-3">
Second Day:
</div>
<div class="col-3">
Third Day:
</div>
<div class="col-3">
Fourth Day:
</div>
<div class="col-3">
Fifth Day:
</div>
<div class="col-3">
Sixth Day:
</div>
<div class="col-3">
Seventh Day:
</div>
<div class="col-3">
Totals:
</div>
</div>
</div>
</div>
css仅为：
.schedule{
overflow: auto;
white-space: nowrap;
-webkit-overflow-scrolling: auto;
background-color: lightblue;
}
我很感激任何事先的帮助，
麦克
共有2个答案
试试看：
<div class="container-fluid">
<div class="row">
<div class="col-3">
This is
</div>
<div class="col-9">
the first row
</div>
</div>
<div class="row">
<div class="col-6">
This is
</div>
<div class="col-6">
the second row
</div>
</div>
<!-- This should scroll -->
<div class="row schedule">
<!-- This is the header row -->
<div class="row">
<div class="col-3">
Employee Name:
</div>
<div class="col-3">
First Day:
</div>
<div class="col-3">
Second Day:
</div>
<div class="col-3">
Third Day:
</div>
<div class="col-3">
Fourth Day:
</div>
<div class="col-3">
Fifth Day:
</div>
<div class="col-3">
Sixth Day:
</div>
<div class="col-3">
Seventh Day:
</div>
<div class="col-3">
Totals:
</div>
</div>
</div>
</div>
CSS：
.schedule >.row{
flex-wrap: nowrap!important;
display: flex;
flex-direction: row;
background-color: lightblue;
}
我发现如果我有flex-nowrap到行，我希望有scroll来处理这个问题。
-
注意我没有使用任何前端
-
我正在尝试使用骆驼和cxf组件创建服务总线。cxfendpoint应该会收到任何肥皂请求。 我有以下片段： 但在请求过程中，我会遇到以下错误： 组织。阿帕奇。cxf。拦截器。错误：给定的SOAPAction QueryInfl与操作不匹配 我可以做些什么来使我的endpoint接收所有类型的soapaction头？
-
问题内容： 在PHP中，我尝试创建换行符： 然后，我在记事本中打开创建的文件，它按字面意义写换行符： 1 John Doe \ r \ n 1 John Doe \ r \ n 1 John Doe \ r \ n 我尝试了的多种变体，但没有任何效果。为什么换行符不变成换行符？ 问题答案： 只有双引号的字符串解释转义序列，并分别将其解释为“0x0D”和“ 0x0A”，因此您需要： 另一方面，单引号
-
我正在处理 PostgreSQL 客户记录。 我的任务是导出客户记录。 除了有联系信息的客户之外，我还有另一张桌子。 每行一个联系人项目（电话、值或电子邮件、值等）。 当我加入并关联数据时，我会为每个客户ID提取多个记录（如果每个客户有一个以上的通信类型，例如电话和电子邮件）。 我怎么能不为每种通信类型再做一行，而是将信息放入临时列（如电话列，传真列和电子邮件列）中 - 然后每个客户只有1行。 编
-
我有个问题： 我想创建一个chatwebapp，并使用Bootstrap进行布局。不幸的是，在下面的代码中，我得到了一个不应该存在的水平滚动条。我使用列和行，我知道在引导css中有一个填充，但当我试图移除它时，实际上什么也没有发生，滚动条仍停留在那里。也许你们能帮我。 null null
-
问题内容： 在Flutter中创建带有长字符串的Text小部件时，将其文本直接放在Column中会自动换行。但是，当它在Column-Row-Column内时，文本会溢出屏幕的一侧。 如何在Column-Row-Column内换行？造成这种差异的原因是什么？在我看来，上列的任何子级都具有相同的宽度是合乎逻辑的吗？为什么宽度无界？ 我尝试根据其他答案将文本放在Expanded，Flexible，Co