Question

我正在.net 4.5框架下用Visual Basic编写Web应用程序。我有代码将glyphicons放在每个元素旁边。我的问题是图标和文本框偏移了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>&nbsp;&nbsp;Send&nbsp;
        </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
bootstrapValidator.min.css

非常感谢任何帮助。谢谢，乔纳森

Answer 1

而不是在代码中提及glyphicon：

<span class="input-group-addon glyphicon glyphicon-envelope"></span>

将其写为：

<span class="input-group-addon">
  <i class="glyphicon glyphicon-envelope"></i>
</span>

示例在这里CODEPEN

享受.. :)

输入框

1 个答案: