控制页面响应宽度大小

Question

我有一个看起来像这样的页面

你在图片上看到的日期时间选择器的宽度不能再小了。因此，当宽度超过 1200 像素且低于 1550 像素时，日期选择器会超出其位置，如下所示：

当宽度为 1550 像素或宽度足以容纳日期时间选择器时当宽度低于 1200 时，响应性开始发挥作用，使页面看起来像这样

所以我需要帮助的是如何将响应速度设置为 att 1550 而不是 1200。这可能吗，如果是的话如何？

Answer 1

您可以轻松地以媒体查询的形式将自定义 'breakpoints' 添加到您的 css。

@media only screen and (max-width: 1550px) {
  // type your styles here
  // set your content to be vertically aligned
}

如果有帮助请告诉我:)

Answer 2

你也可以像这样修复溢出内容

.button-container {
     padding-left: 0;
    list-style: none;
    display: -webkit-box;
    display: flex;
    flex-wrap: nowrap;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-box-align: baseline;
    align-items: baseline;
    margin-bottom: 30px;
}



.button-container {
    max-width: 300px;
}


.button-wrapper {
    background-color: lightblue;
    flex-shrink: 0;
}
.button-wrapper button{
  padding:5px 15px;
  border-radius:5px;
  border:1px solid #000;
  margin:10px;
}
.button-container::-webkit-scrollbar {
  width: 2px;
  height:8px;
}
button-container::-webkit-scrollbar-track {
  box-shadow: inset 0 0 2px grey; 
  border-radius: 0px;
}
.button-container::-webkit-scrollbar-thumb {
  background: #ff9b51; 
  border-radius: 0px;
}
.button-container::-webkit-scrollbar-thumb:hover {
  background: gray; 
}

<!-- Meta View Port -->
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title></title>
    <link rel="stylesheet" href="">
    <!-- Jquery -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <!-- FontAwesome -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">  

<div class="button-container">
  <div class="button-wrapper">
    <button type="button" class="btn-default">Range</button>
    <button type="button" class="btn-default">Week</button>
    <button type="button" class="btn-default">Month</button>
    <button type="button" class="btn-default">Quarter</button>
    <button type="button" class="btn-default">Year</button>
  </div>
</div>

控制页面响应宽度大小

controll a pages responsive width size

responsive-design

laravel

vue.js

bootstrap-vue