ブートストラップを使用した画像付き3列

Question

2つの列を含むブートストラップレイアウトを使用しています。しかし、今私は入力フィールドの右側に少しイメージを持っています。イメージは、入力フィールドのスニペットの隣に表示する必要があります。

これは私の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> 

しかし、それはこのようになりましたになります：あなたはのInput groupコンポーネントを使用することにより、入力フィールドの隣にアイコンを追加することができます

Answer 1

ブートストラップ。

ブートストラップ4ベータ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から「先円」アイコンを組み込んでいます。また、ユーティリティークラスが<span>タグに適用されていることに注意してください。

ベータ2のCSSでは、マークアップが若干異なります。

ブートストラップ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"/>