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。

使用类.ui-grid-c作为第四列网格，每个25%使用您自己的CSS改变 2nd 的行为，如下所示：

.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 Mobile中编辑网格百分比

1 个答案:

Codepen Demo