MVC5在EditorFor旁邊添加glyphiconFor

這讓我有點瘋狂，無法調整我添加到EditorFor文本框旁邊的圖形的期望寬度。MVC5在EditorFor旁邊添加glyphiconFor

我在下面我加旁EditorFor一個glyphicon的，請注意我最初把這是MVC5視圖模板生成的默認：

<div class="form-group"> 
     @Html.LabelFor(model => model.ContactedDate, htmlAttributes: new { @class = "control-label col-md-2" }) 
     <div class="col-md-10 input-group"> 
      @Html.EditorFor(model => model.ContactedDate, new { htmlAttributes = new { @class = "form-control", @readonly = "readonly" } }) 
      <span class="btn btn-default input-group-addon"> 
       <span class="glyphicon glyphicon-calendar"></span> 
      </span> 
      @Html.ValidationMessageFor(model => model.ContactedDate, "", new { @class = "text-danger" }) 
     </div> 
    </div>

而且它看起來像這樣，注意glyphicon是那麼遠：

我後來改變到.col-md-4這成爲下面：

還有一定距離，當我使用.col-md-3，它將與箱重疊：

更重要的是，當我調整瀏覽器的寬度，glyphicon只會當我使用.col-md-4或.col-md-3時，移動到第一張屏幕截圖的位置，就像它不會緊挨着文本框。

我也在這裏檢查了這個question但它不幫助我。

如何正確添加圖形？

來源

2016-06-10 Steven Yong

是否使用默認的ASP.NET MVC項目這裏是代碼的一部分，從我的項目

<div class="form-group"> @Html.LabelFor(model => model.scheduledDate, htmlAttributes: new { @class = "control-label col-md-12" }) <div class="col-md-12"> <div class='input-group date' id='myDatepicker'> @Html.EditorFor(model => model.scheduledDate, new { htmlAttributes = new { @class = "form-control"} }) <span class="input-group-addon"> <span class="glyphicon glyphicon-calendar"></span> </span> </div> @Html.ValidationMessageFor(model => model.scheduledDate, "", new { @class = "text-danger" }) </div>

和調節日期模板？它有一個導致此問題的CSS規則。 –

是的，我想不出哪一個。 –

非常感謝@Tasos，您的評論只是給了我一個在網絡上的谷歌的想法，我發現它在這裏：https://roastlambda.wordpress.com/2014/08/29/fixing-wayward-input-groups -in-the-default-mvc5-bootstrap-template/ –

新的ASP.NET MVC項目帶有Site.css樣式表。導致此問題的規則是低於一個使所有<input>有max-width:280和弄亂了你的.input-group：

input, 
select, 
textarea { 
    max-width: 280px; 
}

您可以更改上述規則，包括.input-group並具備以下條件：

input, 
select, 
textarea, 
.input-group { 
    max-width: 280px; 
}

編輯：此CSS也打破.form-block Bootstrap類，因此您還需要以下規則。

input.form-block, 
select.form-block, 
textarea.form-block { 
max-width: none; 
}

來源

2016-06-10 08:48:46

我剛剛發現最好的分開.input-group像這樣.input-group { max-width：350px; }這將允許文本框的寬度與其餘文本框保持一致。 –

無CS需要。只有在什麼時間和日期現在

<script> 
$('#myDatepicker').datetimepicker({ 
    format: 'DD.MM.YYYY HH:mm', 
    minDate: 'now' 
});</script>

來源

2017-10-15 15:00:52

MVC5在EditorFor旁邊添加glyphiconFor

回答

相關問題