[英]How to place an icon next to a string as an input value in an array of objects (React)?
[英]How to place icon next to input field in bootstrap
我在項目中使用引導程序。 我正在創建一個編輯表單,其中我必須在輸入字段旁邊使用一些信息圖標,在此任務中,我面臨對齊問題。 請檢查這張圖片:
請注意,巨大的黑白輸入字段和圖標之間存在差距,而選擇列表和持續時間字段同樣存在問題。 該圖像的html代碼為:
<div class="row">
<div class="col-md-6 form-group">
@Html.LabelFor(p => p.Services[0].FixedTimeSlot, new { @class = "col-md-5 control-label small" })
<div class="col-md-5">
@Html.TextBoxFor(p => p.Services[0].FixedTimeSlot, new { @class = "form-control input-sm", data_bind = "value: FixedTimeSlot" })
@Html.ValidationMessageFor(p => p.Services[0].FixedTimeSlot, "", new { @class = "help-block" })
</div>
<div class="col-md-2">
<a tabindex="-1" href="javascript:void(0);"><span class="fa fa-info-circle text-info icon-ms" data-bind=""></span></a>
</div>
</div>
<div class="col-md-6 form-group">
@Html.LabelFor(p => p.Services[0].Duration, new { @class = "col-md-5 control-label small" })
<div class="col-md-7">
<div class="row">
<div class="col-md-6">
@Html.TextBoxFor(p => p.Services[0].Duration, new { @class = "form-control input-sm", data_bind = "value: Duration" })
</div>
<div class="col-md-6">
<select class="form-control input-sm" data-bind="options: $parents[1].timeUnits, optionsText: 'unit', optionsValue: 'value', value: selectedTimeUnit"></select>
</div>
</div>
@Html.ValidationMessageFor(p => p.Services[0].Duration, "", new { @class = "help-block" })
</div>
</div>
</div>
我是bootstrap的新手,並且在css中非常一周,所以我不想編寫css,可以使用bootsrap類解決此問題嗎?
嘗試這個
<div class="col-md-6 form-group">
@Html.LabelFor(p => p.Services[0].FixedTimeSlot, new { @class = "col-md-5 control-label small" })
<div class="col-md-5">
@Html.TextBoxFor(p => p.Services[0].FixedTimeSlot, new { @class = "form-control input-sm", data_bind = "value: FixedTimeSlot" })
@Html.ValidationMessageFor(p => p.Services[0].FixedTimeSlot, "", new { @class = "help-block" })
<a tabindex="-1" href="javascript:void(0);"><span class="fa fa-info-circle text-info icon-ms" data-bind=""></span></a>
</div>
</div>
col-md-X類為div定義了一個“框”。 如果將錨點放置在與文本框相同的div內,則圖標應對齊。
進一步閱讀: http : //getbootstrap.com/examples/grid/
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.