如何更改角度 JS 材料输入框宽度

Question

我正在使用Angular JS材料输入框，输入框的宽度有点小。我想增加它。也尝试了很多解决方案。但不起作用。这是我的代码。

<md-input-container class="md-block">
<label>Address</label>
<input type="text" name="address"  ng-model="mgAddress.model.address" value="{{address}}" required/>
</div>
</md-input-container>
<md-button class="md-raised md-primary" ng-click="$manageAddressController.submitAddress(mgAddress.model.address)" ng-disabled="manageAddressForm.$invalid || manageAddressForm.$pristine">Add</md-button>

Answer 1

您可以使用 CSS 来设置输入元素的样式。 在这里，我使用内联样式作为百分比来设置输入框的宽度。 您也可以使用其他指标(像素等)来设置宽度。

<md-input-container class="md-block">
<label>Address</label>
<input type="text" style="width:120%" name="address" ng-model="mgAddress.model.address" value="{{address}}" required/>
</md-input-container>

Answer 2

您可以使用 flex 指令使元素占用父元素的百分比宽度或拉伸以占用剩余空间。 该元素将根据父容器是行还是列，拉伸以水平或垂直填充父容器

<md-input-container class="md-block" flex>
<label>Address</label>
<input type="text" name="address"  ng-model="mgAddress.model.address" value="{{address}}" required/>
</md-input-container>
<md-button class="md-raised md-primary" ng-click="$manageAddressController.submitAddress(mgAddress.model.address)" ng-disabled="manageAddressForm.$invalid || manageAddressForm.$pristine">Add</md-button>

编辑：

文档中的示例：

<!-- Parent wrapper which specifies the layout as row -->
<div layout="row">
<!-- Flex directive on the child -->
<md-input-container class="md-block" flex>
<label>Company (Disabled)</label>
<input ng-model="user.company" disabled>
</md-input-container>
</div>

Answer 3

<div class="col-12" style="padding-right: 700px;" >
<div class="form-group">
<label>Address</label>
<input type="text" name="address"  ng-model="mgAddress.model.address" value="{{address}}" required/>
</div>
</div> 

---

您可以简单地使用 style="填充右：700px;"如果要将文本框的大小设置为右侧700px。