この日付範囲セレクタテキストボックスの幅を増やすにはどうすればよいですか？

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%; 
}