Question

这是我当前的HTML，用于显示带有bulma的表单字段。

<body>
  <div id="root">
    <nav class="navbar is-primary is-navbar-sticky">
    </nav>
    <section class="section">
      <div class="container">
        <form>
          <div class="field">
            <label class="label is-medium">
              "Title"
              <div class="control">
                  <input type="text" class="input is-medium is-danger" placeholder="Put the title of item here" required="" value="">
                  <p class="help is-danger">title's length should be equal or greater than 10. Current: 0</p>
              </div>
            </label>
          </div>
        </form>
      </div>
    </section>
  </div>
</body>

到目前为止一切顺利。

问题是input将在每个断点上占用全宽，对于桌面分辨率来说太过分了。

如何使input仅占移动断点的全宽，而移动断点后可能需要一定的宽度。

是否有bulma方法可以做到这一点？而不是写我自己的CSS规则？

Answer 1

你使用bulma框架所以指定bulma框架的网格系统你可以在你的输入元素中使用class column你可以使用多少列来设置输入字段的宽度

Answer 2

<div class="control"> <input type="text" class="input column-12 is-medium is-danger" placeholder="Put the title of item here" required="" value=""> <p class="help is-danger">title's length should be equal or greater than 10. Current: 0</p> </div>

如何通过bulma css在桌面移动和一定宽度上制作我的表格全宽？

2 个答案: