Question

我正在尝试在这里做一些事情：

使这些按钮响应每个屏幕尺寸
在屏幕尺寸变为“移动”时将按钮下移- 尺寸和更小（但每行至少保留4个按钮，以便我可以添加更多按钮）
当屏幕尺寸达到768px或以上时，按钮的行会移动回到更宽的位置，每行有8个按钮
使用bootstrap 4（但最好使用3）

几天来我一直在努力使它们像这样工作，但我似乎无法正确地进行媒体查询。这是我要建立的照相馆。

我写的代码在下面，这是它的一个代码笔-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

https://codepen.io/andrewchar/pen/jKZEPB?editors=1100

我剥离了很多代码，仅显示了如何使用Bootstrap 4通过几个Bootstrap类实现此操作的示例。

添加类row作为包裹btn-wrap的div的父元素，您会看到它将display: flex和flex-wrap: wrap添加到该元素。因此，flex-wrap: wrap甚至不需要使用媒体查询时，只要在空间不足的情况下就可以堆叠div。

当您进入像Iphone5这样的小屏幕时，还需要做更多的工作，但这只是演示flex box在使用bootstrap 4时可以为我们完成繁重的工作

Answer 2

您只需要添加'flex-wrap：wrap to the selector。vertical-buttons'行。试试这个代码。

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

获取@media查询以正确使用按钮

2 个答案: