Question

我用背景色创建了一个标签。该视图在台式机上很好，但是当更改为移动设备时，bg不会响应h3。

请参阅所附视频。

HTML代码：

"use strict";

const output = document.getElementById("output");


class CockpitTest extends React.Component {

  getOutput(data) {
    output.append(document.createTextNode(data));
  }

  async componentDidMount(){
    await cockpit.spawn(["/usr/local/bin/statusdemo"])
    .stream(this.getOutput)
    var myArray = JSON.parse(output.innerHTML);
    console.log(myArray.psu1.status);
    console.log(myArray.psu2.status);
    console.log(myArray.mgmt1);
    console.log(myArray.mgmt2);
    console.log(myArray.data1);
    console.log(myArray.data2);
  }

  async showStatus() {
    await cockpit.spawn(["/usr/local/bin/statusdemo"])
    .stream(this.getOutput)
    var myArray = JSON.parse(output.innerHTML);
    console.log(myArray.psu1.status);
    console.log(myArray.psu2.status);
    console.log(myArray.mgmt1);
    console.log(myArray.mgmt2);
    console.log(myArray.data1);
    console.log(myArray.data2);
    return (
      <ul>
        {myArray.map((data, i) => (
          <li key={i}>{data.text}</li>
        ))}
      </ul>
    );
  }

  render() {
      return (
       <div>
         <button onClick={this.showStatus}>SHOW SERVER STATUS</button>
       </div>
);
  }
}
ReactDOM.render(
  <CockpitTest />,
  document.getElementById('root')
);

我的CSS代码：

<div class="setup-box">
<div class="treeview-box-content">
<h3 class="setup-box-title">Windows</h3>
</div>
</div>

Answer 1

这是因为您的倾倒宽度设置为33％。您的bg文本将无法以该大小填充文本。

您可以使用媒体查询来增加较小设备上的宽度

如何制作响应式BG标题标签？

1 个答案: