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

$ b

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

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

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

UPDATE: DESIRED OUTCOME

CURRENT STATUS I 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