当前位置: 首页 > 知识库问答 >
问题:

为两个类引导CSS

杨经武
2023-03-14

我有一个div标记,其中有.col-xs-12.col-md-4.left。我希望当应用程序在pc中启动时,应用程序使用CSS for.col-MD-4.left,而当应用程序在智能手机中启动时,只使用.col-xs-12CSS。

我已经测试过了:

.col-md-4.left {
  text-align: left;
}

.col-xs-12 {
  text-align: center;
}
<div class="col-xs-12 col-md-4 left">
  My Test
</div>

其思想是,当应用程序在pc中时,div将是.col-MD-4text-align:left,而在智能手机中,-col-xs-12text-align:center将是.col-MD-4text-align:center

共有1个答案

伏欣悦
2023-03-14

尝试使用媒体查询,可以放置特定的断点。

参考:https://www.w3schools.com/css/css_rwd_mediaqueries.asp

    <!DOCTYPE html>
    <html>
    <head>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <style>
    .example {
      padding: 20px;
      color: white;
    }
    /* Extra small devices (phones, 600px and down) */
    @media only screen and (max-width: 600px) {
      .example {background: red;}
    }
    
    /* Small devices (portrait tablets and large phones, 600px and up) */
    @media only screen and (min-width: 600px) {
      .example {background: green;}
    }
    
    /* Medium devices (landscape tablets, 768px and up) */
    @media only screen and (min-width: 768px) {
      .example {background: blue;}
    } 
    
    /* Large devices (laptops/desktops, 992px and up) */
    @media only screen and (min-width: 992px) {
      .example {background: orange;}
    } 
    
    /* Extra large devices (large laptops and desktops, 1200px and up) */
    @media only screen and (min-width: 1200px) {
      .example {background: pink;}
    }
    </style>
    </head>
    <body>
    
    <h2>Typical Media Query Breakpoints</h2>
    <p class="example">Resize the browser window to see how the background color of this paragraph changes on different screen sizes.</p>
    
    </body>
    </html>
 类似资料:
  • 有时候在设计数据结构的时候,可能会遇到两个类需要相互引用的情形。比如类A有类型为B的成员,而类B又有类型为A的成员。 那么这种情形下,两个类的设计上需要注意什么呢? 同一文件 尝试方案 将A和B的定义都放在一个文件中,例如: #include <iostream> class A { public: A() { aa_ = 'A'; } char aa_;

  • 我有两个类,一个被设计用来包含另一个 然而,我不能相互引用类类型(和),只能是其中之一。 我怎样才能在彼此之间引用这两个类类型呢?否则最好的方法是什么?

  • 我正试图在页面中央对齐两幅有响应的图像。 我在用电脑。容器类,但仍然是向右的。

  • 问题内容: 我有一些基本的设置/拆卸代码,我想在一大堆单元测试中重用它们。因此,我想到了创建一些派生类以避免在每个测试类中重复代码的好主意。 这样,我收到了两个奇怪的错误。第一,我无法解决。这是无法解决的一个: 这是我的基类: 这是我的派生类: 另一个奇怪的错误是: 解决方案是在派生类的函数中添加单词“ args” 。有什么办法可以避免这种情况? 记住,我在这一方面有两个错误。 问题答案: 这是因

  • 我有一个java类来处理XLS文件,并使用apache poi jar(poi-ooxml-3.8-20120326.jar)来完成。我最近还部署了BIRT jar来生成一些报告。接下来,当我调用java类进行XLS处理时,得到以下错误。 我发现'WorkbookFactory'类也在BIRT相关的jar(org.eclipse.birt.runtime_4.2.1.v20120918-1113.