Question

我正在尝试使用bulma列，但它们在移动视图中溢出了主体。在下一张图片中，您可以看到屏幕右侧的白色间隙。我检查过，身体标签与'番茄'部分的右边界齐平。但是，当列的实例出现时，它会溢出body标签并创建水平滚动。

提前感谢您的帮助！

<!DOCTYPE html>
<html lang="en" dir="ltr">

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.6.2/css/bulma.min.css" rel="stylesheet" />
  <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.8/css/all.css" integrity="sha384-3AB7yXWz4OeoZcPbieVW64vVXEwADiYyAEhwilzWsLw+9FgqpyjjStpPnpBO8o8S" crossorigin="anonymous">
  <link rel="stylesheet" href="assets/stylesheets/main.css">
  <title>Buffalo Wings</title>
</head>

<body>
  <div class="bw-hero" style='display: flex; align-items: center; justify-content: center'>
    <h1 class='title is-bold' style="color: white">slider tbd</h1>
  </div>

  <div class="container">

    <div class="columns">
      <div class="column">
        <img src="assets/images/svg/the_chicken_wings_experts.svg" alt="The chicken wings experts">
      </div>
      <div class="column">
        <h2 class="title has-text-centered">SELECCIONA TU PAÍS Y CIUDAD</h2>
        <div class="field is-grouped is-grouped-centered">
          <div class="control">
            <div class="select">
              <select>
              <option>País</option>
              <option>With options</option>
            </select>
            </div>
          </div>

          <div class="control">
            <div class="select">
              <select>
              <option>Ciudad</option>
              <option>With options</option>
            </select>
            </div>
          </div>
        </div>
        <div class="field has-text-centered">
          <input class="is-checkradio" id="saveLocationPreferences" type="checkbox" name="saveLocationPreferences" checked="checked">
          <label for="saveLocationPreferences">Recordar mi selección</label>
        </div>
      </div>
    </div>


  </div>

</body>

</html>

Answer 1

为避免在移动设备上进行水平滚动，请在viewport meta中更改<head>标签，方法如下：

<meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1.0, user-scalable=no">

而不是：

<meta name="viewport" content="width=device-width, initial-scale=1">

Answer 2

对我来说，解决方案就是将水平溢出物隐藏在体内

body {
   overflow-x: hidden;
}

@ sam-nzd提供了一种替代解决方案，但是它使用户无法缩放。我很想知道自己哪个更好。

Bulma列移动溢出的身体

2 个答案: