vendredi 24 juin 2016

Bootstrap - Input group doesn't work

I am trying to align inputs and buttons using the .input-group class as shown here.

It works well and shows the desired output when I place a button before the text box.

But, when I place the button next to the text box, the button doesn't stay close to the text box.

I am using Bootstrap 3 in my ASP.NET project, created using Visual Studio 2015 Community Edition.

screenshot

Here is the code:

<div class="row">
  <div class="col-lg-6">
    <div class="input-group">
      <span class="input-group-btn">
        <button class="btn btn-default" type="button">Go!</button>
      </span>
      <input type="text" class="form-control" placeholder="Search for...">
    </div><!-- /input-group -->
  </div><!-- /.col-lg-6 -->
  <div class="col-lg-6">
    <div class="input-group">
      <input type="text" class="form-control" placeholder="Search for...">
      <span class="input-group-btn">
        <button class="btn btn-default" type="button">Go!</button>
      </span>
    </div><!-- /input-group -->
  </div><!-- /.col-lg-6 -->
</div><!-- /.row -->

Aucun commentaire:

Enregistrer un commentaire