Bulma - 移动端布局

Question

Bulma - 移动端布局

9

我正在使用Bulma CSS框架（红色标题和蓝色页脚都是固定的）来实现此移动端布局：

以下是相应的代码：

<nav class="navbar is-danger is-fixed-top" role="navigation">
    <div class="navbar-brand">
        <a class="navbar-item" href="index.php">
            <img src="http://via.placeholder.com/28x28" width="28" height="28">
        </a>
        <div class="navbar-burger burger">
            <span></span>
            <span></span>
            <span></span>
        </div>
    </div>
</nav>
<nav class="navbar is-link is-fixed-bottom" role="navigation">
    <div class="navbar-brand">
        <a class="navbar-item is-expanded">
            <i class="fa fa-user"></i>
            <p class="is-size-7">Account</p>
        </a>
        <a class="navbar-item is-expanded">
            <i class="fa fa-list"></i>
            <p class="is-size-7">Tasks</p>
        </a>
        <a class="navbar-item is-expanded">
            <i class="fa fa-flag"></i>
            <p class="is-size-7">Alerts</p>
        </a>
        <a class="navbar-item is-expanded">
            <i class="fa fa-cog"></i>
            <p class="is-size-7">Settings</p>
        </a>
    </div>
</nav>
<div class="section">
    <h1>Content</h1>
    <p>Lorem ipsum dolor sit amet...</p>
</div>

头部：是否有一种方法可以显示左侧汉堡菜单，中心化的标志和右侧图标？
底部：是否有一种类可以将图标和文本上下堆叠而不是并排显示？

这个模型能否直接实现？我不介意在CSS中手动完成，但由于这种移动布局似乎非常普遍，因此我希望有一种自然的方法来完成它。

- Thomas Milan

我建议你查看Bulma所组成的CSS，然后你所有的问题都会得到解答。你所苦恼的是极其基础的CSS对齐行为。此外，你永远无法使Web应用程序的行为像本地应用程序一样——因为Safari。 - herrbischoff

1

就像我说的：“我不介意在CSS中手动完成，但由于这种移动布局似乎很常见，我希望有一种自然的方法来完成它。” 当我说“自然的方法”时，我的意思是“即用型”类，对我来说，这是使用CSS框架的重点。你基本上是告诉我要在CSS中完成它，而我的问题是关于框架提供的工具，而不是flexbox的工作原理。对于误解，我感到抱歉...... 关于Web应用程序和本地应用程序之间的区别，谢谢您的好建议。不幸的是，我不是自由职业者，无法决定使用哪种技术堆栈。 - Thomas Milan

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- sol · Accepted Answer

这个设计稿能直接实现吗？

能和不能。

你需要对HTML进行一些小的重组，并添加几行CSS将汉堡移到左侧。

脚注的布局可以使用Bulma修饰器类来实现。

示例代码

解决方案

标题

<div class="navbar-brand">
    <div class="navbar-burger burger">
      <span></span>
      <span></span>
      <span></span>
    </div>
    <a class="navbar-item" href="index.php">
      <img src="...">
    </a>
</div>

将.navbar-brand元素的顺序切换 - 先显示汉堡包，其次是徽标。

添加以下CSS。

.navbar-burger {
  margin-left: 0;
  margin-right: auto;
}

页脚

将.navbar-item添加.is-block和has-text-centered修改类：

<a class="navbar-item is-expanded is-block has-text-centered">
   <i class="fa fa-user"></i>
   <p class="is-size-7">Account</p>
</a>

了解更多信息，请参见此处和此处

片段

添加js以使演示中的菜单可操作。

// Get all "navbar-burger" elements
var $navbarBurgers = Array.prototype.slice.call(document.querySelectorAll('.navbar-burger'), 0);

// Check if there are any navbar burgers
if ($navbarBurgers.length > 0) {

  // Add a click event on each of them
  $navbarBurgers.forEach(function($el) {
    $el.addEventListener('click', function() {

      // Get the target from the "data-target" attribute
      var target = $el.dataset.target;
      var $target = document.getElementById(target);

      // Toggle the class on both the "navbar-burger" and the "navbar-menu"
      $el.classList.toggle('is-active');
      $target.classList.toggle('is-active');

    });
  });
}

.navbar-burger {
  margin-left: 0 !important;
  margin-right: auto;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.6.1/css/bulma.css" rel="stylesheet"/>
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<nav class="navbar is-danger is-fixed-top" role="navigation">
  <div class="navbar-brand">
    <div class="navbar-burger burger" data-target="navMenu">
      <span></span>
      <span></span>
      <span></span>
    </div>
    <a class="navbar-item" href="index.php">
      <img src="https://via.placeholder.com/28x28" width="28" height="28">
    </a>

  </div>
  <div class="navbar-menu" id="navMenu">
    <div class="navbar-start">
      <a class="navbar-item">Example 1</a>
      <a class="navbar-item">Example 2</a>
      <a class="navbar-item">Example 3</a>
    </div>
    <div class="navbar-end">
    </div>
  </div>
</nav>
<nav class="navbar is-link is-fixed-bottom" role="navigation">
  <div class="navbar-brand">
    <a class="navbar-item is-expanded  is-block has-text-centered">
      <i class="fa fa-user"></i>
      <p class="is-size-7">Account</p>
    </a>
    <a class="navbar-item is-expanded  is-block has-text-centered">
      <i class="fa fa-list"></i>
      <p class="is-size-7">Tasks</p>
    </a>
    <a class="navbar-item is-expanded is-block has-text-centered">
      <i class="fa fa-flag"></i>
      <p class="is-size-7">Alerts</p>
    </a>
    <a class="navbar-item is-expanded  is-block has-text-centered">
      <i class="fa fa-cog"></i>
      <p class="is-size-7">Settings</p>
    </a>
  </div>
</nav>
<div class="section">
  <h1>Content</h1>
  <p>Lorem ipsum dolor sit amet...</p>
</div>