0
Visual Basicで.net 4.5フレームワークのWebアプリケーションを作成しています。私は各要素の隣にグリフコンを配置するコードを持っています。私の問題は、アイコンとテキストボックスが1〜2ピクセルのようにずれていることです。私は整列が正しいようにアイコンの配置を調整する方法を理解することができませんでした。以下は、ミスアライメントを示す画像です。 
グリフコンを入力ボックスに入れたブートストラップ
これは、フォームを作成するコードです：
<head runat="server">
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>AccuRecord</title>
<asp:PlaceHolder runat="server">
<%: Scripts.Render("~/bundles/modernizr") %>
</asp:PlaceHolder>
<webopt:bundlereference runat="server" path="~/Content/css" />
<link href="~/favicon.ico" rel="shortcut icon" type="image/x-icon" />
</head>
<body>
<form runat="server" id="thresholdForm" class="form-horizontal">
<asp:ScriptManager runat="server">
<Scripts>
<%--To learn more about bundling scripts in ScriptManager see http://go.microsoft.com/fwlink/?LinkID=301884 --%>
<%--Framework Scripts--%>
<asp:ScriptReference Name="MsAjaxBundle" />
<asp:ScriptReference Name="jquery" />
<asp:ScriptReference Name="bootstrap" />
<asp:ScriptReference Name="respond" />
<asp:ScriptReference Name="WebForms.js" Assembly="System.Web" Path="~/Scripts/WebForms/WebForms.js" />
<asp:ScriptReference Name="WebUIValidation.js" Assembly="System.Web" Path="~/Scripts/WebForms/WebUIValidation.js" />
<asp:ScriptReference Name="MenuStandards.js" Assembly="System.Web" Path="~/Scripts/WebForms/MenuStandards.js" />
<asp:ScriptReference Name="GridView.js" Assembly="System.Web" Path="~/Scripts/WebForms/GridView.js" />
<asp:ScriptReference Name="DetailsView.js" Assembly="System.Web" Path="~/Scripts/WebForms/DetailsView.js" />
<asp:ScriptReference Name="TreeView.js" Assembly="System.Web" Path="~/Scripts/WebForms/TreeView.js" />
<asp:ScriptReference Name="WebParts.js" Assembly="System.Web" Path="~/Scripts/WebForms/WebParts.js" />
<asp:ScriptReference Name="Focus.js" Assembly="System.Web" Path="~/Scripts/WebForms/Focus.js" />
<asp:ScriptReference Name="WebFormsBundle" />
<%--Site Scripts--%>
</Scripts>
</asp:ScriptManager>
<div class="form-group">
<label class="col-lg-3 control-label">Full name</label>
<div class="col-lg-5">
<div class="input-group">
<span class="input-group-addon glyphicon glyphicon-user"></span>
<asp:TextBox ID="txtFullName" name="txtFullName" runat="server" CssClass="form-control" ClientIDMode="Static"></asp:TextBox>
</div>
</div>
</div>
<div class="form-group">
<label class="col-lg-3 control-label">Phone number</label>
<div class="col-lg-5">
<div class="input-group">
<span class="input-group-addon glyphicon glyphicon-phone-alt"></span>
<asp:TextBox ID="txtPhone" name="txtPhone" runat="server" CssClass="form-control" ClientIDMode="Static"></asp:TextBox>
</div>
</div>
</div>
<div class="form-group">
<label class="col-lg-3 control-label">eMail Address</label>
<div class="col-lg-5">
<div class="input-group">
<span class="input-group-addon glyphicon glyphicon-envelope"></span>
<asp:TextBox ID="txtEmail" runat="server" name="txtEmail" ClientIDMode="Static" CssClass="form-control"></asp:TextBox>
</div>
</div>
</div>
<div class="form-group">
<label class="col-lg-3 control-label">Message</label>
<div class="col-lg-5">
<div class="input-group">
<asp:TextBox ID="txtMessage" name="txtMessage" Width="500px" ClientIDMode="Static" CssClass="form-control" runat="server" TextMode="MultiLine" Rows="5"></asp:TextBox>
</div>
</div>
</div>
<div class="form-group">
<div class="col-lg-9 col-lg-offset-3">
<button type="submit" class="btn btn-primary">
<span class="glyphicon glyphicon-send"></span> Send
</button>
</div>
</div>
</form>
<script type="text/javascript" src="scripts/bootstrapValidator.js"></script>
<script>
$(document).ready(function() {
$('#thresholdForm').bootstrapValidator({
message: 'This value is not valid',
feedbackIcons: {
valid: 'glyphicon glyphicon-ok',
invalid: 'glyphicon glyphicon-remove',
validating: 'glyphicon glyphicon-refresh'
},
// Set default threshold for all fields. It is null by default
threshold: 3,
fields: {
txtFullName: {
threshold: 10,
validators: {
notEmpty: {
message: 'The full name is required'
}
}
},
txtPhone: {
threshold: 5,
validators: {
notEmpty: {
message: 'The phone number is required'
},
phone: {
message: 'The phone number is not valid',
country: 'US'
}
}
},
txtEmail: {
// The threshold option is not set
// It will be taken from the form option (which is 3 in this example)
validators: {
notEmpty: {
message: 'The eMail address is required'
},
emailAddress: {
message: 'The eMail address entered is not valid'
}
}
}
}
});
});
</script>
</body>
コードは、以下の.cssファイルにプル：
- bootstrap.css bootstrap.min.css
- bootstrapValidator.css
- bootstrapValida tor.min.css
ご協力いただきまして誠にありがとうございます。 ではなく、あなたのコードのようにglyphiconを言及するの、 ジョナサン
レンダリングされたHTMLとCSS、n ASPのot。 [mcve] – j08691