Question

我有一个正在开发的表单，虽然我可以让表单字段响应宽度，但textarea框比右边的选择字段略高。如何保持这两个高度相同，同时保持对移动设备的响应？

以下是表单的codepen。以下是代码：

      <div class="row">
        <div class="col-md-6">
          <div class="control-group">
            <div class="form-group floating-label-form-group controls">
              <label for="00NW0000001Zjiv" class="control-label" style="font-weight:300">Truck Model(s)</label>
              <textarea id="00NW0000001Zjiv" name="00NW0000001Zjiv" type="text" class="form-control input-lg" rows="5"></textarea><span class="help-block bg-danger"></span>
            </div>
          </div>
        </div>
        <div class="col-md-6">
          <div class="control-group">
            <div class="form-group floating-label-form-group controls">
              <label for="00NW0000001Zjje" class="control-label" style="font-weight:300">State(s) in which the truck(s) run</label>
              <select id="00NW0000001Zjje" name="00NW0000001Zjje" multiple="multiple" class="form-control input-lg">
                <option value="Alabama">Alabama</option>
                <option value="Alaska">Alaska</option>
                <option value="Arizona">Arizona</option>
                <option value="Arkansas">Arkansas</option>
                <option value="California">California</option>
                <option value="Colorado">Colorado</option>
                <option value="Connecticut">Connecticut</option>
                <option value="Delaware">Delaware</option>
                <option value="Florida">Florida</option>
                <option value="Georgia">Georgia</option>
                <option value="Hawaii">Hawaii</option>
                <option value="Idaho">Idaho</option>
                <option value="Illinois">Illinois</option>
                <option value="Indiana">Indiana</option>
                <option value="Iowa">Iowa</option>
                <option value="Kansas">Kansas</option>
                <option value="Kentucky">Kentucky</option>
                <option value="Louisiana">Louisiana</option>
                <option value="Maine">Maine</option>
                <option value="Maryland">Maryland</option>
                <option value="Massachusetts">Massachusetts</option>
                <option value="Michigan">Michigan</option>
                <option value="Minnesota">Minnesota</option>
                <option value="Mississippi">Mississippi</option>
                <option value="Missouri">Missouri</option>
                <option value="Montana">Montana</option>
                <option value="Nebraska">Nebraska</option>
                <option value="Nevada">Nevada</option>
                <option value="New Hampshire">New Hampshire</option>
                <option value="New Jersey">New Jersey</option>
                <option value="New Mexico">New Mexico</option>
                <option value="New York">New York</option>
                <option value="North Carolina">North Carolina</option>
                <option value="North Dakota">North Dakota</option>
                <option value="Ohio">Ohio</option>
                <option value="Oklahoma">Oklahoma</option>
                <option value="Oregon">Oregon</option>
                <option value="Pennsylvania">Pennsylvania</option>
                <option value="Rhode Island">Rhode Island</option>
                <option value="South Carolina">South Carolina</option>
                <option value="South Dakota">South Dakota</option>
                <option value="Tennessee">Tennessee</option>
                <option value="Texas">Texas</option>
                <option value="Utah">Utah</option>
                <option value="Vermont">Vermont</option>
                <option value="Virginia">Virginia</option>
                <option value="Washington">Washington</option>
                <option value="West Virginia">West Virginia</option>
                <option value="Wisconsin">Wisconsin</option>
                <option value="Wyoming">Wyoming</option>
              </select><span class="help-block bg-danger"></span>
            </div>
          </div>
        </div>
      </div>

谢谢！

Answer 1

可以通过手动高度给textarea来实现。因此，请在媒体查询中为textarea提供高度。

通过这种方式，您也可以实现响应能力。

我希望这对你有所帮助 JSFiddle Link

<div class="row">
        <div class="left">
            <label for="first-name">First Name</label>
                <input type="text" name="first-name" placeholder="First Name" id="first-name" required="required"  />

        </div>
        <div class="right">
            <label for="details">Details</label>
            <textarea name="details" placeholder="Details" id="details" required></textarea>
        </div>
    </div>

CSS：

 @media only screen and (min-width: 600px) {

        textarea { height: calc(100% - 0.75em); /* 100% fill height, minus height of details label */ }
    }

如何使textarea与select一样高，同时仍然是reonsive？

1 个答案: