부트 스트랩이있는 이미지가있는 세 개의 열

Question

두 개의 열이 포함 된 부트 스트랩 레이아웃을 사용하고 있습니다. 하지만 지금은 입력 필드 오른쪽에 약간의 이미지가 필요합니다. 이미지는 입력 필드 스 니펫 옆에 표시되어야합니다.

이 내 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-beta 3은 다음과 같습니다.

<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> 태그에 적용된 .border-0 .bg-white 유틸리티 클래스가 원하는 스타일을 얻는 것에 유의하십시오.

베타 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"/>