Bootstrap& HTML / CSS：创建一个可滚动的复选框水平列表

问题描述

更新：希望结果

当前状态

strong>

我最近问这个，这是非常相似的，除了没有Bootstrap。

下面发布的解决方案依赖于使用围绕< div id =container> 包装复选框列表， width：2000px

然而，该解决方案无法使用Bootstrap。

我希望列表跨越Bootstrap容器的整个宽度，并且当宽度值更改/ id被移除时，此列表会断开。它目前滚动，但有两行，而不是1。

如果我使.ck-box更大，包装会变得更糟

这是我的代码（已删除 width：2000px ）：

 ＃index.html 
< div class =container> 
< div class =row> 
< div class =col-md-1> 
< img class =date-scrollsrc =/ assets / LeftScroll-5090a173eda2e839d00923366dad5c510b34d5f60312573e77dfba19a1f92648.pngalt =Leftscroll> 
< / div> 
 
< div class =col-md-10> 
< div class =dates> 
< form class =event_searchid =event_searchaction =/ eventsaccept-charset =UTF-8method =get>< input name =utf8type =隐藏值=✓> 
< div id =日期> 
< div class =ck-button> 
< label> 
< input type =checkboxname =q [events_start_dt_matches_any] []id =q_events_start_dt_matches_any_value =2018-03-26checked =checked> 
< span> 
 Mar< br> 
 26 
< / span> 
< / label> 
< / div> 
< div class =ck-button> 
< label> 
< input type =checkboxname =q [events_start_dt_matches_any] []id =q_events_start_dt_matches_any_value =2018-03-27checked =checked> 
< span> 
 Mar< br> 
 27 
< / span> 
< / label> 
< / div> 
< div class =ck-button> 
< label> 
< input type =checkboxname =q [events_start_dt_matches_any] []id =q_events_start_dt_matches_any_value =2018-03-28checked =checked> 
< span> 
 Mar< br> 
 28 
< / span> 
< / label> 
< / div> 
< div class =ck-button> 
< label> 
< input type =checkboxname =q [events_start_dt_matches_any] []id =q_events_start_dt_matches_any_value =2018-03-29checked =checked> 
< span> 
 Mar< br> 
 29 
< / span> 
< / label> 
< / div> 
< div class =ck-button> 
< label> 
< input type =checkboxname =q [events_start_dt_matches_any] []id =q_events_start_dt_matches_any_value =2018-03-30checked =checked> 
< span> 
 Mar< br> 
 30 
< / span> 
< / label> 
< / div> 
< div class =ck-button> 
< label> 
< input type =checkboxname =q [events_start_dt_matches_any] []id =q_events_start_dt_matches_any_value =2018-03-31checked =checked> 
< span> 
 Mar< br> 
 31 
< / span> 
< / label> 
< / div> 
< div class =ck-button> 
< label> 
< input type =checkboxname =q [events_start_dt_matches_any] []id =q_events_start_dt_matches_any_value =2018-04-01checked =checked> 
< span> 
 Apr< br> 
 1 
< / span> 
< / label> 
< / div> 
< div class =ck-button> 
< label> 
< input type =checkboxname =q [events_start_dt_matches_any] []id =q_events_start_dt_matches_any_value =2018-04-02checked =checked> 
< span> 
 Apr< br> 
 2 
< / span> 
< / label> 
< / div> 
< div class =ck-button> 
< label> 
< input type =checkboxname =q [events_start_dt_matches_any] []id =q_events_start_dt_matches_any_value =2018-04-03checked =checked> 
< span> 
 Apr< br> 
 3 
< / span> 
< / label> 
< / div> 
< div class =ck-button> 
< label> 
< input type =checkboxname =q [events_start_dt_matches_any] []id =q_events_start_dt_matches_any_value =2018-04-04checked =checked> 
< span> 
 Apr< br> 
 4 
< / span> 
< / label> 
< / div> 
< div class =ck-button> 
< label> 
< input type =checkboxname =q [events_start_dt_matches_any] []id =q_events_start_dt_matches_any_value =2018-04-05checked =checked> 
< span> 
 Apr< br> 
 5 
< / span> 
< / label> 
< / div> 
< div class =ck-button> 
< label> 
< input type =checkboxname =q [events_start_dt_matches_any] []id =q_events_start_dt_matches_any_value =2018-04-06checked =checked> 
< span> 
 Apr< br> 
 6 
< / span> 
< / label> 
< / div> 
< div class =ck-button> 
< label> 
< input type =checkboxname =q [events_start_dt_matches_any] []id =q_events_start_dt_matches_any_value =2018-04-07checked =checked> 
< span> 
 Apr< br> 
 7 
< / span> 
< / label> 
< / div> 
< div class =ck-button> 
< label> 
< input type =checkboxname =q [events_start_dt_matches_any] []id =q_events_start_dt_matches_any_value =2018-04-08checked =checked> 
< span> 
 Apr< br> 
 8 
< / span> 
< / label> 
< / div> 
< div class =ck-button> 
< label> 
< input type =checkboxname =q [events_start_dt_matches_any] []id =q_events_start_dt_matches_any_value =2018-04-09checked =checked> 
< span> 
 Apr< br> 
 9 
< / span> 
< / label> 
< / div> 
< div class =ck-button> 
< label> 
< input type =checkboxname =q [events_start_dt_matches_any] []id =q_events_start_dt_matches_any_value =2018-04-10checked =checked> 
< span> 
 Apr< br> 
 10 
< / span> 
< / label> 
< / div> 
< div class =ck-button> 
< label> 
< input type =checkboxname =q [events_start_dt_matches_any] []id =q_events_start_dt_matches_any_value =2018-04-11checked =checked> 
< span> 
 Apr< br> 
 11 
< / span> 
< / label> 
< / div> 
< div class =ck-button> 
< label> 
< input type =checkboxname =q [events_start_dt_matches_any] []id =q_events_start_dt_matches_any_value =2018-04-12checked =checked> 
< span> 
 Apr< br> 
 12 
< / span> 
< / label> 
< / div> 
< div class =ck-button> 
< label> 
< input type =checkboxname =q [events_start_dt_matches_any] []id =q_events_start_dt_matches_any_value =2018-04-13checked =checked> 
< span> 
 Apr< br> 
 13 
< / span> 
< / label> 
< / div> 
< div class =ck-button> 
< label> 
< input type =checkboxname =q [events_start_dt_matches_any] []id =q_events_start_dt_matches_any_value =2018-04-14checked =checked> 
< span> 
 Apr< br> 
 14 
< / span> 
< / label> 
< / div> 
< div class =ck-button> 
< label> 
< input type =checkboxname =q [events_start_dt_matches_any] []id =q_events_start_dt_matches_any_value =2018-04-15checked =checked> 
< span> 
 Apr< br> 
 15 
< / span> 
< / label> 
< / div> 
< div class =ck-button> 
< label> 
< input type =checkboxname =q [events_start_dt_matches_any] []id =q_events_start_dt_matches_any_value =2018-04-16checked =checked> 
< span> 
 Apr< br> 
 16 
< / span> 
< / label> 
< / div> 
< div class =ck-button> 
< label> 
< input type =checkboxname =q [events_start_dt_matches_any] []id =q_events_start_dt_matches_any_value =2018-04-17checked =checked> 
< span> 
 Apr< br> 
 17 
< / span> 
< / label> 
< / div> 
< div class =ck-button> 
< label> 
< input type =checkboxname =q [events_start_dt_matches_any] []id =q_events_start_dt_matches_any_value =2018-04-18checked =checked> 
< span> 
 Apr< br> 
 18 
< / span> 
< / label> 
< / div> 
< / div> 
< / form> < / DIV> 
< / div> 
< div class =col-md-1> 
 < / div> 
< / div> 
< / div> 
  

。

  style.scss 
 .dates {
 form {
 display：block; 
 white-space：nowrap; 
溢出：auto; 
 
 .ck-button {
 
 float：left; 
 display：inline-block; 
 width：50px; 
 height：40px; 
 border-radius：4px; 
 border：1px solid＃D0D0D0; 
 text-align：center; 
背景颜色：白色; 
 margin：4px; 
 
 label {
 display：inline-block; 
颜色：黑色; 
 font-family：Helvetica Neue; 
 
 span {
 text-align：center; 
 vertical-align：center; 
 display：inline-block; 
} 
 input {
 display：none; 
} 
} 
} 
 
 
} 
。按钮输入：选中+范围{
背景颜色： $西拉; 
颜色：#fff; 
} 
 
} 
 
 .dates form .ck-button label {
 width：100％; 
身高：100％; 
} 
 .dates .ck-button input：checked + span {
 width：100％; 
身高：100％; 
} 
  

有什么想法？

解决方案

以下解决方案要求您使用Bootstrap v4.x，因为它利用 flexbox 。

.checkbox-wrapper {overflow-x：auto;溢出-y：隐藏;最大高度：4.25rem;} checkbox-wrapper .checkbox-item {margin-right：0.25rem;}。checkbox-wrapper .checkbox-item：last-child {margin-right：0;}。checkbox-item span {display：block;背景：#ccc;填充：.5rem; line-height：1rem; font-family：Helvetica Neue; font-size：0.85rem; font-weight：bold; cursor：pointer;} .checkbox-item input [type = checkbox]：checked + span {background：＃d86275; color：#fff;} < script type = text / javascriptsrc =// ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js\"></script><script type =text / javascriptsrc = https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.11.0/umd/popper.min.js\"></script><script type =text / javascriptsrc = //maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js\"> ;</script><link href =// maxcdn.bootstrapcdn.com/bootstrap/4.0.0/ css / bootstrap.min.cssrel =stylesheet>< div class =container-fluid> < div class =row> < div class =col> < form class =checkbox-wrapper d-flex flex-row> < label class =checkbox-item text-center>< input type =checkboxvalue =0class =d-none>< span> Mar< br> 1< / span> < /标签> < label class =checkbox-item text-center>< input type =checkboxvalue =0class =d-nonechecked>< span> Mar< br> 2< / span> < /标签> < label class =checkbox-item text-center>< input type =checkboxvalue =0class =d-nonechecked>< span> Mar< br> 3< / span> < /标签> < label class =checkbox-item text-center>< input type =checkboxvalue =0class =d-nonechecked>< span> Mar< br> 4< / span> < /标签> < label class =checkbox-item text-center>< input type =checkboxvalue =0class =d-nonechecked>< span> Mar< br> 5< / span> < /标签> < label class =checkbox-item text-center>< input type =checkboxvalue =0class =d-nonechecked>< span> Mar< br> 6< / span> < /标签> < label class =checkbox-item text-center>< input type =checkboxvalue =0class =d-nonechecked>< span> Mar< br> 7< / span> < /标签> < label class =checkbox-item text-center>< input type =checkboxvalue =0class =d-none>< span> Mar< br> 1< / span> < /标签> < label class =checkbox-item text-center>< input type =checkboxvalue =0class =d-nonechecked>< span> Mar< br> 2< / span> < /标签> < label class =checkbox-item text-center>< input type =checkboxvalue =0class =d-nonechecked>< span> Mar< br> 3< / span> < /标签> < label class =checkbox-item text-center>< input type =checkboxvalue =0class =d-nonechecked>< span> Mar< br> 4< / span> < /标签> < label class =checkbox-item text-center>< input type =checkboxvalue =0class =d-nonechecked>< span> Mar< br> 5< / span> < /标签> < label class =checkbox-item text-center>< input type =checkboxvalue =0class =d-nonechecked>< span> Mar< br> 6< / span> < /标签> < label class =checkbox-item text-center>< input type =checkboxvalue =0class =d-nonechecked>< span> Mar< br> 7< / span> < /标签> < label class =checkbox-item text-center>< input type =checkboxvalue =0class =d-none>< span> Mar< br> 1< / span> < /标签> < label class =checkbox-item text-center>< input type =checkboxvalue =0class =d-nonechecked>< span> Mar< br> 2< / span> < /标签> < label class =checkbox-item text-center>< input type =checkboxvalue =0class =d-nonechecked>< span> Mar< br> 3< / span> < /标签> < label class =checkbox-item text-center>< input type =checkboxvalue =0class =d-nonechecked>< span> Mar< br> 4< / span> < /标签> < label class =checkbox-item text-center>< input type =checkboxvalue =0class =d-nonechecked>< span> Mar< br> 5< / span> < /标签> < label class =checkbox-item text-center>< input type =checkboxvalue =0class =d-nonechecked>< span> Mar< br> 6< / span> < /标签> < label class =checkbox-item text-center>< input type =checkboxvalue =0class =d-nonechecked>< span> Mar< br> 7< / span> < /标签> < label class =checkbox-item text-center>< input type =checkboxvalue =0class =d-none>< span> Mar< br> 1< / span> < /标签> < label class =checkbox-item text-center>< input type =checkboxvalue =0class =d-nonechecked>< span> Mar< br> 2< / span> < /标签> < label class =checkbox-item text-center>< input type =checkboxvalue =0class =d-nonechecked>< span> Mar< br> 3< / span> < /标签> < label class =checkbox-item text-center>< input type =checkboxvalue =0class =d-nonechecked>< span> Mar< br> 4< / span> < /标签> < label class =checkbox-item text-center>< input type =checkboxvalue =0class =d-nonechecked>< span> Mar< br> 5< / span> < /标签> < label class =checkbox-item text-center>< input type =checkboxvalue =0class =d-nonechecked>< span> Mar< br> 6< / span> < /标签> < label class =checkbox-item text-center>< input type =checkboxvalue =0class =d-nonechecked>< span> Mar< br> 7< / span> < /标签> < label class =checkbox-item text-center>< input type =checkboxvalue =0class =d-none>< span> Mar< br> 1< / span> < /标签> < label class =checkbox-item text-center>< input type =checkboxvalue =0class =d-nonechecked>< span> Mar< br> 2< / span> < /标签> < label class =checkbox-item text-center>< input type =checkboxvalue =0class =d-nonechecked>< span> Mar< br> 3< / span> < /标签> < label class =checkbox-item text-center>< input type =checkboxvalue =0class =d-nonechecked>< span> Mar< br> 4< / span> < /标签> < label class =checkbox-item text-center>< input type =checkboxvalue =0class =d-nonechecked>< span> Mar< br> 5< / span> < /标签> < label class =checkbox-item text-center>< input type =checkboxvalue =0class =d-nonechecked>< span> Mar< br> 6< / span> < /标签> < label class =checkbox-item text-center>< input type =checkboxvalue =0class =d-nonechecked>< span> Mar< br> 7< / span> < /标签> < /形式> < / DIV> < / div>< / div>

$ b

代码我们依靠Bootstrap 4的内置实用程序类将基于Flex的布局结构应用于< form> （ d-flex 和 flex-row ）。这强制子项水平流动并忽略任何溢出。

从那里指定 overflow-x 和 max-height 来确保滚动条的显示和高度的一致性。

您需要进一步扩展此片段以实现您的左/右箭头，我假设这些箭头旨在模仿滚动行为。这可能需要额外的JavaScript

UPDATE: DESIRED OUTCOME

CURRENT STATUSI recently asked this question that is very similar to this one, except without Bootstrap.

The solution, which is posted below, depended upon wrapping the list of checkboxes around a <div id="container"> with width: 2000px http://jsfiddle.net/markocalvocruz/55jp59ho/18/

However, the solution does not work using Bootstrap.

I want the list to span the full width of Bootstrap's container and this breaks when the width value changes/ the id is removed. It currently scrolls, but there are two lines instead of 1.

The wrapping gets worse if I make the .ck-box bigger as well

This is my code (removedwidth:2000px):

#index.html
<div class="container">
 <div class="row">
      <div class="col-md-1">
        <img class="date-scroll" src="/assets/LeftScroll-5090a173eda2e839d00923366dad5c510b34d5f60312573e77dfba19a1f92648.png" alt="Leftscroll">
      </div>

      <div class="col-md-10">
        <div class="dates">
          <form class="event_search" id="event_search" action="/events" accept-charset="UTF-8" method="get"><input name="utf8" type="hidden" value="✓">
            <div id="dates">
                <div class="ck-button">
                  <label>
                    <input type="checkbox" name="q[events_start_dt_matches_any][]" id="q_events_start_dt_matches_any_" value="2018-03-26" checked="checked">
                    <span>
                      Mar <br>
                      26
                    </span>
                  </label>
                </div>
                <div class="ck-button">
                  <label>
                    <input type="checkbox" name="q[events_start_dt_matches_any][]" id="q_events_start_dt_matches_any_" value="2018-03-27" checked="checked">
                    <span>
                      Mar <br>
                      27
                    </span>
                  </label>
                </div>
                <div class="ck-button">
                  <label>
                    <input type="checkbox" name="q[events_start_dt_matches_any][]" id="q_events_start_dt_matches_any_" value="2018-03-28" checked="checked">
                    <span>
                      Mar <br>
                      28
                    </span>
                  </label>
                </div>
                <div class="ck-button">
                  <label>
                    <input type="checkbox" name="q[events_start_dt_matches_any][]" id="q_events_start_dt_matches_any_" value="2018-03-29" checked="checked">
                    <span>
                      Mar <br>
                      29
                    </span>
                  </label>
                </div>
                <div class="ck-button">
                  <label>
                    <input type="checkbox" name="q[events_start_dt_matches_any][]" id="q_events_start_dt_matches_any_" value="2018-03-30" checked="checked">
                    <span>
                      Mar <br>
                      30
                    </span>
                  </label>
                </div>
                <div class="ck-button">
                  <label>
                    <input type="checkbox" name="q[events_start_dt_matches_any][]" id="q_events_start_dt_matches_any_" value="2018-03-31" checked="checked">
                    <span>
                      Mar <br>
                      31
                    </span>
                  </label>
                </div>
                <div class="ck-button">
                  <label>
                    <input type="checkbox" name="q[events_start_dt_matches_any][]" id="q_events_start_dt_matches_any_" value="2018-04-01" checked="checked">
                    <span>
                      Apr <br>
                      1
                    </span>
                  </label>
                </div>
                <div class="ck-button">
                  <label>
                    <input type="checkbox" name="q[events_start_dt_matches_any][]" id="q_events_start_dt_matches_any_" value="2018-04-02" checked="checked">
                    <span>
                      Apr <br>
                      2
                    </span>
                  </label>
                </div>
                <div class="ck-button">
                  <label>
                    <input type="checkbox" name="q[events_start_dt_matches_any][]" id="q_events_start_dt_matches_any_" value="2018-04-03" checked="checked">
                    <span>
                      Apr <br>
                      3
                    </span>
                  </label>
                </div>
                <div class="ck-button">
                  <label>
                    <input type="checkbox" name="q[events_start_dt_matches_any][]" id="q_events_start_dt_matches_any_" value="2018-04-04" checked="checked">
                    <span>
                      Apr <br>
                      4
                    </span>
                  </label>
                </div>
                <div class="ck-button">
                  <label>
                    <input type="checkbox" name="q[events_start_dt_matches_any][]" id="q_events_start_dt_matches_any_" value="2018-04-05" checked="checked">
                    <span>
                      Apr <br>
                      5
                    </span>
                  </label>
                </div>
                <div class="ck-button">
                  <label>
                    <input type="checkbox" name="q[events_start_dt_matches_any][]" id="q_events_start_dt_matches_any_" value="2018-04-06" checked="checked">
                    <span>
                      Apr <br>
                      6
                    </span>
                  </label>
                </div>
                <div class="ck-button">
                  <label>
                    <input type="checkbox" name="q[events_start_dt_matches_any][]" id="q_events_start_dt_matches_any_" value="2018-04-07" checked="checked">
                    <span>
                      Apr <br>
                      7
                    </span>
                  </label>
                </div>
                <div class="ck-button">
                  <label>
                    <input type="checkbox" name="q[events_start_dt_matches_any][]" id="q_events_start_dt_matches_any_" value="2018-04-08" checked="checked">
                    <span>
                      Apr <br>
                      8
                    </span>
                  </label>
                </div>
                <div class="ck-button">
                  <label>
                    <input type="checkbox" name="q[events_start_dt_matches_any][]" id="q_events_start_dt_matches_any_" value="2018-04-09" checked="checked">
                    <span>
                      Apr <br>
                      9
                    </span>
                  </label>
                </div>
                <div class="ck-button">
                  <label>
                    <input type="checkbox" name="q[events_start_dt_matches_any][]" id="q_events_start_dt_matches_any_" value="2018-04-10" checked="checked">
                    <span>
                      Apr <br>
                      10
                    </span>
                  </label>
                </div>
                <div class="ck-button">
                  <label>
                    <input type="checkbox" name="q[events_start_dt_matches_any][]" id="q_events_start_dt_matches_any_" value="2018-04-11" checked="checked">
                    <span>
                      Apr <br>
                      11
                    </span>
                  </label>
                </div>
                <div class="ck-button">
                  <label>
                    <input type="checkbox" name="q[events_start_dt_matches_any][]" id="q_events_start_dt_matches_any_" value="2018-04-12" checked="checked">
                    <span>
                      Apr <br>
                      12
                    </span>
                  </label>
                </div>
                <div class="ck-button">
                  <label>
                    <input type="checkbox" name="q[events_start_dt_matches_any][]" id="q_events_start_dt_matches_any_" value="2018-04-13" checked="checked">
                    <span>
                      Apr <br>
                      13
                    </span>
                  </label>
                </div>
                <div class="ck-button">
                  <label>
                    <input type="checkbox" name="q[events_start_dt_matches_any][]" id="q_events_start_dt_matches_any_" value="2018-04-14" checked="checked">
                    <span>
                      Apr <br>
                      14
                    </span>
                  </label>
                </div>
                <div class="ck-button">
                  <label>
                    <input type="checkbox" name="q[events_start_dt_matches_any][]" id="q_events_start_dt_matches_any_" value="2018-04-15" checked="checked">
                    <span>
                      Apr <br>
                      15
                    </span>
                  </label>
                </div>
                <div class="ck-button">
                  <label>
                    <input type="checkbox" name="q[events_start_dt_matches_any][]" id="q_events_start_dt_matches_any_" value="2018-04-16" checked="checked">
                    <span>
                      Apr <br>
                      16
                    </span>
                  </label>
                </div>
                <div class="ck-button">
                  <label>
                    <input type="checkbox" name="q[events_start_dt_matches_any][]" id="q_events_start_dt_matches_any_" value="2018-04-17" checked="checked">
                    <span>
                      Apr <br>
                      17
                    </span>
                  </label>
                </div>
                <div class="ck-button">
                  <label>
                    <input type="checkbox" name="q[events_start_dt_matches_any][]" id="q_events_start_dt_matches_any_" value="2018-04-18" checked="checked">
                    <span>
                      Apr <br>
                      18
                    </span>
                  </label>
                </div>
            </div>
</form>        </div>
      </div>
      <div class="col-md-1">
        <img class="date-scroll" src="/assets/RightScroll-d97f0607dc5f86e60e902b742ba1e9424a7b9b5af74f046aead3c0698ae97bbd.png" alt="Rightscroll">
      </div>
</div>
</div>

.

style.scss
.dates {
  form {
    display: block;
    white-space: nowrap;
    overflow: auto;

    .ck-button {

      float:left;
      display: inline-block;
      width: 50px;
      height: 40px;
      border-radius:4px;
      border:1px solid #D0D0D0;
      text-align: center;
      background-color: white;
      margin:4px;

      label {
        display: inline-block;
        color: black;
        font-family: "Helvetica Neue";

        span {
          text-align: center;
          vertical-align: center;
          display: inline-block;
        }
        input {
          display: none;
        }
      }
    }


  }
  .ck-button input:checked + span {
    background-color: $shiraz;
    color:#fff;
  }

}

.dates form .ck-button label{
  width:100%;
  height:100%;
}
.dates .ck-button input:checked + span{
  width:100%;
  height:100%;
}

Any ideas?

解决方案

The following solution requires you to use Bootstrap v4.x as it takes advantage of flexbox.

.checkbox-wrapper {
  overflow-x: auto;
  overflow-y: hidden;
  max-height: 4.25rem;
}

.checkbox-wrapper .checkbox-item {
  margin-right: 0.25rem;
}

.checkbox-wrapper .checkbox-item:last-child {
  margin-right: 0;
}

.checkbox-item span {
  display: block;
  background: #ccc;
  padding: .5rem;
  line-height: 1rem;
  font-family: "Helvetica Neue";
  font-size: 0.85rem;
  font-weight: bold;
  cursor: pointer;
}

.checkbox-item input[type=checkbox]:checked + span {
  background: #d86275;
  color: #fff;
}

<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.11.0/umd/popper.min.js"></script>
<script type="text/javascript" src="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet">

<div class="container-fluid">
  <div class="row">
    <div class="col">

      <form class="checkbox-wrapper d-flex flex-row">
      <label class="checkbox-item text-center"><input type="checkbox" value="0" class="d-none"><span>Mar<br>1</span></label>
      <label class="checkbox-item text-center"><input type="checkbox" value="0" class="d-none" checked><span>Mar<br>2</span></label>
      <label class="checkbox-item text-center"><input type="checkbox" value="0" class="d-none" checked><span>Mar<br>3</span></label>
      <label class="checkbox-item text-center"><input type="checkbox" value="0" class="d-none" checked><span>Mar<br>4</span></label>
      <label class="checkbox-item text-center"><input type="checkbox" value="0" class="d-none" checked><span>Mar<br>5</span></label>
      <label class="checkbox-item text-center"><input type="checkbox" value="0" class="d-none" checked><span>Mar<br>6</span></label>
      <label class="checkbox-item text-center"><input type="checkbox" value="0" class="d-none" checked><span>Mar<br>7</span></label>
      <label class="checkbox-item text-center"><input type="checkbox" value="0" class="d-none"><span>Mar<br>1</span></label>
      <label class="checkbox-item text-center"><input type="checkbox" value="0" class="d-none" checked><span>Mar<br>2</span></label>
      <label class="checkbox-item text-center"><input type="checkbox" value="0" class="d-none" checked><span>Mar<br>3</span></label>
      <label class="checkbox-item text-center"><input type="checkbox" value="0" class="d-none" checked><span>Mar<br>4</span></label>
      <label class="checkbox-item text-center"><input type="checkbox" value="0" class="d-none" checked><span>Mar<br>5</span></label>
      <label class="checkbox-item text-center"><input type="checkbox" value="0" class="d-none" checked><span>Mar<br>6</span></label>
      <label class="checkbox-item text-center"><input type="checkbox" value="0" class="d-none" checked><span>Mar<br>7</span></label>
      <label class="checkbox-item text-center"><input type="checkbox" value="0" class="d-none"><span>Mar<br>1</span></label>
      <label class="checkbox-item text-center"><input type="checkbox" value="0" class="d-none" checked><span>Mar<br>2</span></label>
      <label class="checkbox-item text-center"><input type="checkbox" value="0" class="d-none" checked><span>Mar<br>3</span></label>
      <label class="checkbox-item text-center"><input type="checkbox" value="0" class="d-none" checked><span>Mar<br>4</span></label>
      <label class="checkbox-item text-center"><input type="checkbox" value="0" class="d-none" checked><span>Mar<br>5</span></label>
      <label class="checkbox-item text-center"><input type="checkbox" value="0" class="d-none" checked><span>Mar<br>6</span></label>
      <label class="checkbox-item text-center"><input type="checkbox" value="0" class="d-none" checked><span>Mar<br>7</span></label>
      <label class="checkbox-item text-center"><input type="checkbox" value="0" class="d-none"><span>Mar<br>1</span></label>
      <label class="checkbox-item text-center"><input type="checkbox" value="0" class="d-none" checked><span>Mar<br>2</span></label>
      <label class="checkbox-item text-center"><input type="checkbox" value="0" class="d-none" checked><span>Mar<br>3</span></label>
      <label class="checkbox-item text-center"><input type="checkbox" value="0" class="d-none" checked><span>Mar<br>4</span></label>
      <label class="checkbox-item text-center"><input type="checkbox" value="0" class="d-none" checked><span>Mar<br>5</span></label>
      <label class="checkbox-item text-center"><input type="checkbox" value="0" class="d-none" checked><span>Mar<br>6</span></label>
      <label class="checkbox-item text-center"><input type="checkbox" value="0" class="d-none" checked><span>Mar<br>7</span></label>
      <label class="checkbox-item text-center"><input type="checkbox" value="0" class="d-none"><span>Mar<br>1</span></label>
      <label class="checkbox-item text-center"><input type="checkbox" value="0" class="d-none" checked><span>Mar<br>2</span></label>
      <label class="checkbox-item text-center"><input type="checkbox" value="0" class="d-none" checked><span>Mar<br>3</span></label>
      <label class="checkbox-item text-center"><input type="checkbox" value="0" class="d-none" checked><span>Mar<br>4</span></label>
      <label class="checkbox-item text-center"><input type="checkbox" value="0" class="d-none" checked><span>Mar<br>5</span></label>
      <label class="checkbox-item text-center"><input type="checkbox" value="0" class="d-none" checked><span>Mar<br>6</span></label>
      <label class="checkbox-item text-center"><input type="checkbox" value="0" class="d-none" checked><span>Mar<br>7</span></label>
      </form>

    </div>
  </div>
</div>

In the above code we're relying on Bootstrap 4's built-in utility classes to apply a Flex-based layout structure to the <form> (d-flex and flex-row). This forces the child items to flow horizontally and ignore any overflow.

From there it's a matter of specifying overflow-x and a max-height to ensure that the scrollbar appears and the height is consistent.

You'll need to expand on this snippet further in order to achieve your left/right arrows, which I assume are designed to mimic scrolling behavior. That will likely require additional JavaScript

这篇关于Bootstrap& HTML / CSS：创建一个可滚动的复选框水平列表的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！