【问题标题】: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
      猜你喜欢
      • 1970-01-01
      • 2020-01-13
      • 1970-01-01
      • 1970-01-01
      • 2012-06-11
      • 2013-01-27
      • 2020-07-02
      • 2021-11-10
      • 1970-01-01
      相关资源
      最近更新 更多