在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

基于文档，似乎您只需要定义列的数量，而不能定义每个列的大小和实际选项。但是，您始终可以添加自己的css。

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

.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>

Codepen Demo