在 jQuery 移动版中编辑网格百分比

Question

我正在尝试制作一个带有一些表单下拉菜单和文本框的网格。

我需要网格为 25%、50%、25%，但是我发现我无法理解网格系统的编写方式。

<fieldset class="ui-grid-b">
        <div class="ui-block-a">
          <label for="containerPrefix" class="ui-hidden-accessible">Container Prefix</label>
          <select name="containerPrefix" id="containerPrefix" data-native-menu="false">
            <option>Container Prefix</option>
            <optgroup label="30FT Containers">
              <option value="UBBU">UBBU</option>
              <option value="BOXU">BOXU</option>
              <option value="DAWU">DAWU</option>
            </optgroup>
            <optgroup label="20FT Containers">
              <option value="BEAU">BEAU</option>
              <option value="BSIU">BSIU</option>
              <option value="TTNU">TTNU</option>
              <option value="UBCU">UBCU</option>
              <option value="XINU">XINU</option>
            </optgroup>
          </select>
        </div>

        <div class="ui-block-b">
            <label for="containerNumber"></label>
            <input name="containerNumber" id="containerNumber" type="text" placeholder="Container Number" />
        </div>

        <div class="ui-block-c">
            <label for="containerCheckNum"></label>
            <input name="containerCheckNum" id="containerCheckSum" type="text" placeholder="Check Number" />
        </div>
    </fieldset>

如有任何帮助，我们将不胜感激。

Answer 1

基于 Docs，您似乎只能使用实际选项定义列数，但不能定义每一列的大小。但您始终可以添加自己的 css.

对第四列网格使用 class .ui-grid-c 以这种方式制作每一个 25% 并使用您自己的 CSS 更改 [=21= 的行为]第二个一个像这样：

.ui-grid-c.custom > :nth-child(2) {
  width:50%;
}

<fieldset class="ui-grid-c custom">
  <div class="ui-block-a">
    <label for="containerPrefix" class="ui-hidden-accessible">Container Prefix</label>
    <select name="containerPrefix" id="containerPrefix" data-native-menu="false">
      <option>Container Prefix</option>
      <optgroup label="30FT Containers">
        <option value="UBBU">UBBU</option>
        <option value="BOXU">BOXU</option>
        <option value="DAWU">DAWU</option>
      </optgroup>
      <optgroup label="20FT Containers">
        <option value="BEAU">BEAU</option>
        <option value="BSIU">BSIU</option>
        <option value="TTNU">TTNU</option>
        <option value="UBCU">UBCU</option>
        <option value="XINU">XINU</option>
      </optgroup>
    </select>
  </div>
  <div class="ui-block-b">
    <label for="containerNumber"></label>
    <input name="containerNumber" id="containerNumber" type="text" placeholder="Container Number" />
  </div>
  <div class="ui-block-c">
    <label for="containerCheckNum"></label>
    <input name="containerCheckNum" id="containerCheckSum" type="text" placeholder="Check Number" />
  </div>
</fieldset>

在 jQuery 移动版中编辑网格百分比

Edit grid percentages in jQuery Mobile

html

jquery

jquery-mobile

Codepen Demo