带有 Bootstrap 的图像的三列

Question

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

这是我的 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>

现在我想在 sn-p 输入字段旁边放一个小图像。为了清晰起见，我还添加了一张图片。

我现在是这样的：

<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”图标作为插图。另外，请注意<span> 标签上应用的.border-0 .bg-white 实用程序类以实现所需的样式。

请注意，对于 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"/>