Bootstrap-Taste im input-Gruppe

Wie machen Sie es, so dass es scheint, schön nach der input-Seite mit der gleichen Höhe?

<div class="input-group">
        <input type="text" class="form-control"/>
        <button class="input-group-addon" type="submit">
            <i class="fa fa-search"></i>
        </button>
</div>

Hier ist der code, den http://jsfiddle.net/6mcxdjdr/ die erste ist Die ursprüngliche Eingabe-Gruppe, das zweite ist etwas, was ich bin versucht zu haben

es gibt auch eine Klasse namens " input-group-btn, docs

InformationsquelleAutor Boris Kozarac | 2016-07-06

  1. 33

    Wenn Sie Folgen, bootstrap, Dokumentation http://getbootstrap.com/components/#input-groups:

    <div class="input-group">
  <input type="text" class="form-control" placeholder="Search for...">
  <span class="input-group-btn">
    <button class="btn btn-default" type="submit">
        <i class="fa fa-search"></i>
    </button>
  </span>
</div>

    InformationsquelleAutor Stephen Zeng

  2. 1

    hier ist meine Lösung, mit ein wenig CSS, um die position der Schaltfläche rechts neben dem Eingabefeld durch hinzufügen position: absolute und ein z-index:

    button.input-group-addon {
  position: absolute;
  right: -38px;
  top: 0;
  padding: 2px;
  z-index: 999;
  height: 34px;
  width: 38px;
}

    http://jsfiddle.net/6mcxdjdr/1/

    Andere Idee ist, zu manipulieren, das form submit mit javascript, so dass Sie nicht haben, um Ihre eigenen erstellen-button, aber reichen Sie das Formular durch klicken auf das bootstrap-span. Dies könnte geschehen, indem
    $('.input-group-addon').click(function(){ $('#myform').submit(); });

    InformationsquelleAutor Luuk Skeur

  3. 0

    Versuchen, diese,

    .input-group-addon{
width:50px;  
position:absolute;
margin-left:196px;
height:34px;
}
.input-group-addon > i{
  text-align:center;
  font-size:18px;
}

    InformationsquelleAutor frnt

  4. 0

    Hier ist, wie ich es gemacht habe, musste ich diese überschreiben die css...

    (Bootstrap-4 Beta 2)

    Html

        <div class="input-group">
        <input type="search" class="form-control" placeholder="search..." />
        <span class="input-group-addon input-group-addon-btn bg-white">
            <button class="btn px-2" type="submit"><i class="fa fa-search" aria-hidden="true"></i></button>
        </span>
    </div>

    Und hier ist der css -

    #app-search .input-group-addon-btn {
    padding: 0;

    button {
        border: none;
        background: transparent;
        cursor: pointer;
        height: 100%;
    }
}

    InformationsquelleAutor ganders

Schreibe einen Kommentar