html - 在移动设备上将面板标题中的跨度分隔为两行

Question

我有一个面板，面板标题如下所示，我想弄清楚如何让它在移动设备上分成两行<480px，在大于 480px 时分成一行

<div class="panel panel-default" style="border: 1px solid lightgrey;">
  <div class="panel-heading" style="text-align: center; font-size: 1.2em; color: #777;"> 
<span>panel heading text</span><span> more text</span>
   </div>
  <div>
  </div>
</div>

Answer 1

你需要mediaqueries ,

Media queries are useful when you want to modify your site or app depending on a device's general type (such as print vs. screen) or specific characteristics and parameters (such as screen resolution or browser viewport width).

基本代码可以是:

@media (max-width: 480px) {
  span {
    display: block;
  }
}

演示:

@media (max-width: 480px) {
  span {
    display: block;
  }
}

<div class="panel panel-default" style="border: 1px solid lightgrey;">
  <div class="panel-heading" style="text-align: center; font-size: 1.2em; color: #777;">
    <span>panel heading text</span><span> more text</span>
  </div>
  <div>
  </div>
</div>