Question

我正在使用包含两列的Bootstrap布局。但现在我想在输入字段的右边有一个小图像。图像必须出现在输入字段的旁边。

这是我的html布局：

<div class="row">
    <div class="col-sm-12 col-md-6">
        <p>Op deze pagina kun je de mail die aan nieuw personeel wordt verzonden aanpassen naar je eigen smaak. Pas de content aan en bekijk de preview van de mail voor het te verwachten resultaat.<br /><br /></p>

        @Html.HiddenFor(m => m.Afzender, heeftSchrijfrechten)

        <div class="property extra-margin">
            <label>Onderwerp</label>
            @Html.EditorFor(m => m.Onderwerp, heeftSchrijfrechten)
        </div>

        <div class="property extra-margin">
            <label>Titel</label>
            @Html.EditorFor(m => m.Titel, heeftSchrijfrechten)
        </div>

        <div class="property extra-margin">
            <label>Snippet</label>
            @Html.EditorFor(m => m.Snippet, heeftSchrijfrechten)
        </div>

        @*<div class="col-sm-5" >
            <img src="~/Images/EmailTemplate_Snippet.png" />
        </div>*@

        @if (Html.GebruikerContext().Klant.LogoIDSpecified)
        {
            <div class="property wide extra-margin">
                <br />
                <label>
                    Kies header logo
                </label>
                <div class="email-logo">
                    <label>
                        <span class="email-logo-image" id="EmailTemplateCursor">
                            <img src='/Beheer/Images/mainlogo_274x122.png' />
                        </span>
                        <span class="email-logo-button">
                            @Html.RadioButton("logo-selectie", "standaard", !Model.GebruikKlantLogo, new { @name = "logoKeuze" })
                            <span>standaard logo</span>
                        </span>
                    </label>
                </div>
                <div class="email-logo">
                    <label>
                        <span class="email-logo-image" id="EmailTemplateCursor">
                            <img src='/Beheer/Document/Download?documentID=@(Html.GebruikerContext().Klant.LogoID)' />
                        </span>
                        <span class="email-logo-button">
                            @Html.RadioButton("logo-selectie", "klant", Model.GebruikKlantLogo, new { @name = "logoKeuze" })
                            <span>eigen logo</span>
                        </span>
                    </label>
                </div>
            </div>
        }

        <div class="property">
            <label>Introductietekst</label>
        </div>

        <div class="property">
            @Html.EditorFor(m => m.IntroductieTekst, "HtmlEditorEmailTemplate", heeftSchrijfrechten)
        </div>

        <div class="property">
            <br /> <label>Afzendertekst</label>
        </div>

        <div class="property">
            @Html.EditorFor(m => m.AfzenderTekst, "HtmlEditorEmailTemplate", heeftSchrijfrechten)
        </div>

        @if (heeftSchrijfrechten)
        {
            <div class="navigatie alignRight">
                @ButtonHelper.Button(ButtonType.Default, ButtonSize.Large, "Herstel standaard mail", id: "herstel-standaard", icon: "glyphicon-refresh")
                @ButtonHelper.Button(ButtonType.Primary, ButtonSize.Large, Messages.Global_Action_Opslaan, "opslaan", icon: "glyphicon-floppy-save")
            </div>
        }
    </div>


    <br />
    <div class="col">
        <img src="~/Images/EmailTemplate_Snippet.png" />
    </div>

    <div class="col-sm-12 col-md-6">
        <div id="email-template-edit" class="panel panel-default basisViewEdit">
            <div class="panel-heading panel-heading-sub">
                Mail Preview
                <a id="previewEmail" href="#">
                    <span class="glyphicon glyphicon-repeat right"></span>
                </a>
            </div>
        </div>
        <div id="preview-container">
            <div id="preview" class="backgroundTemplateStyle"></div>
        </div>
    </div>
</div>

现在我想在代码段输入字段旁边放一个小图片。我还添加了一个清晰的图像。

我现在就这样：

<div class="property extra-margin input-group">
    <label>Snippet</label>
    @Html.EditorFor(m => m.Snippet, heeftSchrijfrechten)

    <div class="input-group-append">
        <span class="input-group-text border-0 bg-white" id="snippet">
            <i class="fa fa-info-circle" aria-hidden="true"></i>
        </span>
    </div>
</div>

但现在看起来像这样：

Answer 1

您可以使用Bootstrap的Input group组件在输入字段旁边添加图标。

使用 Bootstrap 4-beta 3 ，murkup如下。

<div class="input-group">
    <input type="text" class="form-control rounded-0" placeholder="Placeholder" aria-label="Placeholder" aria-describedby="snippet">

    <div class="input-group-append">
        <span class="input-group-text border-0 bg-white" id="snippet">
            <i class="fa fa-info-circle" aria-hidden="true"></i>
        </span>
    </div>
</div>


<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.3/css/bootstrap.min.css" rel="stylesheet"/>
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>

上面的示例将fontawesome中的“info-circle”图标作为插图。另请注意.border-0 .bg-white标记上应用的<span>实用程序类，以实现所需的样式。

请注意，对于beta 2 css，标记略有不同。

使用 Bootstrap 3 ，标记会更改为以下内容。

// helper styles not present in Bootstrap 3
.rounded-0 {
    border-radius: 0 !important;
}
.border-0 {
    border: 0 !important;
}
.bg-white {
    background-color: #fff !important;
}

<div class="input-group">
    <input type="text" class="form-control rounded-0" placeholder="Placeholder" aria-label="Placeholder" aria-describedby="snippet">

    <div class="input-group-addon border-0 bg-white" id="snippet">
        <i class="fa fa-info-circle" aria-hidden="true"></i>
    </div>
</div>


<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>

与图像的三列与Bootstrap

1 个答案: