在jQuery Mobile中编辑网格百分比

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%和用你自己的CSS改变第二个的行为，像这样:

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

<<h3> Codepen演示/h3>