Question

Click here to view Image of mobile view您好我想增加日期范围选择器文本框的宽度。Click here to view the image

以下编码：

<div class="row">
    <div class="col-xs-12 col-md-6">
        <label> Date Range</label><br />
        <input type="text" name="daterange" data-GetData="week" data-daterangepickerid="1" id="daterangepicker" class="date-range-picker" value="01/05/2017 - 01/06/2017" />
    </div>
    <div class="col-xs-12 col-md-6">
        <label>Id </label>
        @Html.TextBoxFor(model => model.NRIC, new { @class = "form-control", id = "NRIC" })
    </div>
</div>

我希望日期范围文本框宽度与文本框宽度相同。如何增加??

Answer 1

只需设置输入的样式属性

<input type="text" name="daterange" style="width: 300px" data-GetData="week" data-daterangepickerid="1" id="daterangepicker" class="date-range-picker" value="01/05/2017 - 01/06/2017" />
<!-------------- the width you need --------------^^^^^---->

或添加新的CSS规则

input[name=daterange]{
    width: 300px;
}

你必须根据需要调整宽度......：D

<小时/> 更新：使用包含min-width和max-width css规则

的容器

<div style="max-width: 100%; min-width: 50%">
    <input type="text" name="daterange" style="width: 100%" data-GetData="week" data-daterangepickerid="1" id="daterangepicker" class="date-range-picker" value="01/05/2017 - 01/06/2017" />
</div>

Answer 2

由于您使用的是行和列，因此可以将宽度设置为100％。如果需要，添加填充/边距。 CSS示例：

.date-range-picker {
    width: 100%;
}

如何增加此日期范围选择器文本框的宽度？

2 个答案: