控制页面响应宽度大小答案

【问题标题】：controll a pages responsive width size控制页面响应宽度大小
【发布时间】：2021-06-05 13:32:15
【问题描述】：

我的页面看起来像这样

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

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

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

【问题讨论】：

标签： laravel vue.js responsive-design bootstrap-vue

【解决方案1】：

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

.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>

【讨论】：

【解决方案2】：

您可以轻松地将自定义“断点”以媒体查询的形式添加到您的 CSS。

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

如果这有帮助，请告诉我:)

【讨论】：

Okej 好的开始。但我不知道我的页面转换为响应模式的 CSS 内容会是什么样子。你可以用什么代码让页面变得响应？你也可以做最大宽度：1550 和最小宽度 1200