Question

更新：期望的结果

当前状态 我最近问过这个question非常类似于这个，除了没有Bootstrap。

下面发布的解决方案取决于使用2x2 http://jsfiddle.net/markocalvocruz/55jp59ho/18/

包裹<div id="container">周围的复选框列表

但是，该解决方案无法使用Bootstrap。

我希望列表跨越Bootstrap容器的整个宽度，当宽度值更改/删除id时，这会中断。它目前滚动，但有两行代替1。

如果我将.ck-box设为更大

，包装会变得更糟

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

width: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>

有什么想法吗？

Answer 1

以下解决方案要求您使用Bootstrap v4.x，因为它利用了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>

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

从那里指定overflow-x和max-height以确保滚动条出现且高度一致。

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

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

1 个答案: