html - 让@media 查询与按钮一起正常工作

Question

我想在这里做一些事情:

1. 让这些按钮响应每个屏幕尺寸
2. 当屏幕尺寸变为 Mobile- 时让按钮向下移动-尺寸和更小(但每行至少保留 4 个按钮，以便我可以添加更多按钮稍后)
3. 当屏幕尺寸达到 768px 或以上时，按钮行移动每行 8 个按钮变宽
4. 使用 bootstrap 4(但如果更好的话，会使用 3)

几天来，我一直在努力让它们像这样工作，但我似乎无法正确处理媒体查询。这是我正在 build 的照片库。

我写的代码在下面，这是它的代码笔 - https://codepen.io/gradyhouston/pen/bKLbOO/

感谢您的帮助!

HTML

.img-responsive {
  display: none;
}

@media only screen and (min-width: 376px) and (max-width: 768px) {
  .page-head {
    font-size: 18px;
    /* margin-top: -20px; */
    padding: 0px;
  }
}

@media only screen and (min-width: 376px) and (max-width: 768px) {
  .container-gallery .vertical-buttons {
    display: flex;
    align-items: center;
    /* display: block; */
  }
}


/* @media only screen and (min-width: 768px) {

    } */

.all-button {
  display: flex;
  justify-content: center;
  margin: auto;
}

.vertical-align {
  display: flex;
  align-items: center;
  justify-content: center;
  margin: auto;
  padding: 5px;
}

.vertical-buttons {
  display: flex;
  justify-content: center;
  padding: 5px;
}

.locations {
  /* margin: 0 auto; */
  /* position: absolute;
    display: flex;
    justify-content: space-evenly; */
}

.button {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  -webkit-transition: all .4s ease;
  -moz-transition: all .4s ease;
  -o-transition: all .4s ease;
  transition: all .4s ease;
  width: 90px;
  height: 48px;
  border: 1px solid black;
  background-color: #285e84;
  /*   background-color: transparent; */
  border-radius: 2px;
  color: #fff;
  /* letter-spacing: 2px; */
  /* margin-bottom: 30px */
}

.button:hover {
  background-color: #363636;
  text-shadow: 0 1px hsla(0, 0%, 100%, 0.5);
  color: #fff;
}

.button:active,
.button.is-checked {
  background-color: #42928b;
}

.button.is-checked {
  color: white;
  text-shadow: 0 -1px hsla(0, 0%, 0%, 0.8);
}

.button:active {
  box-shadow: inset 0 1px 10px hsla(0, 0%, 0%, 0.8);
}

<div class="locations">
  <button type="button" class="button all-button is-checked" data- filter="">All</button>
  <div class="container-gallery">

    <div class="row vertical-align">
      <div class="col vertical-buttons xs4 s4  l12">
        <button type="button" class="button" data- filter=".jekyll">Test</button>
        <button type="button" class="button" data-filter=".st- 
    simons">Test</button>
        <button type="button" class="button" data- filter=".monterey">Test</button>
        <button type="button" class="button" data-filter=".blizzcon- 
    2014">Test</button>
        <button type="button" class="button" data-filter=".timberline- 
    lodge">Test</button>
        <button type="button" class="button" data-filter=".lake- 
    trillium">Test</button>
      </div>
    </div>

    <div class="row vertical-align">
      <div class="col vertical-buttons xs4 s4 l12">
        <button type="button" class="button" data-filter=".santa- 
    cruz">Test</button>
        <button type="button" class="button" data-filter=".san- 
    francisco">Test</button>
        <button type="button" class="button" data-filter=".muir">Test</button>
        <button type="button" class="button" data- filter=".vancouver">Test</button>
        <button type="button" class="button" data-filter=".willamette- 
    falls">Test</button>
        <button type="button" class="button" data-filter=".arlington- 
    cemetery">Test</button>
      </div>
    </div>

    <div class="row vertical-align">
      <div class="col vertical-buttons xs4 s4 l12">
        <button type="button" class="button" data- filter=".edgewood">Test</button>
        <button type="button" class="button" data-filter=".hwy- 
    1">Test</button>
        <button type="button" class="button" data- filter=".filoli">Test</button>
        <button type="button" class="button" data- filter=".seattle">Test</button>
        <button type="button" class="button" data-filter=".chihuly- 
    garden">Test</button>
        <button type="button" class="button" data-filter=".mount- 
    hood">Test</button>
      </div>
    </div>
  </div>
</div>

Answer 1

您只需添加行“flex-wrap: wrapto the selector.vertical-buttons”。试试这个代码。

.vertical-buttons {
    display: flex;
    justify-content: center;
    padding: 5px;
    flex-wrap: wrap;
}