Geek Answers Handbook

Bootstrap, alignment of input with label to button without label, vertical / non-horizontal

I want to align input with a label to a button without a label using bootstrap v3 with the default form (vertical rather than horizontal layout of the form).

Desired effect: http://screencast.com/t/b2uwBopW9rW

I managed to solve this problem by creating a label with an inextricable space inside the label, but I am wondering if there is a cleaner and better way to achieve this effect.

Jsfiddle example: https://jsfiddle.net/r6o5hysk/1/

<div class='container' style='width:200px; margin: 50px;'>
    <div class="row">
      <div class="col-xs-10">
        <div class="form-group">
            <label>
                Name
                <input type="text" class="form-control" />
            </label>
        </div>
      </div>
      <div class="col-xs-2">
        <div class="form-group">
          <label>
              &nbsp;
              <div class="btn btn-danger">Remove</div>
          </label>
        </div>
      </div>
    </div>
</div>

Thanks for your time.

+7
source share
6 answers

Bootstrap - , html, . , .

<div class='container' style='width:200px; margin: 50px;'>
  <div class="row">
    <div class="col-lg-12">
      <label>Name</label>
      <div class="row">
        <div class="col-xs-10">
          <div class="form-group">
            <input type="text" class="form-control" />
          </div>
        </div>
        <div class="col-xs-2">
          <div class="form-group">
            <div class="btn btn-danger">Remove</div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

: https://jsfiddle.net/r6o5hysk/2/

+8

- . , label font-size? margin.

button block

.btn.btn-as-block {
  display: block;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
<div class='container'>
  <div class="row">

    <div class="col-xs-9">
      <div class="form-group">
        <label>Name</label>
        <input type="text" class="form-control" />
      </div>
    </div>

    <div class="col-xs-3">
      <div class="form-group">
        <label>&nbsp;</label>
        <div class="btn btn-danger btn-as-block">Remove</div>
      </div>
    </div>

  </div>
</div>
Hide result
+10

, div &nbsp;.

<label> , .

div <div class="form-group">, .

margin-top .

.alignment
{
    margin-top:25px;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/>
<div class='container' style='width:200px; margin: 50px;'>
    <div class="row">
      <div class="col-xs-10">
            <label>
                Name
            </label>
			<input type="text" class="form-control" />
      </div>
      <div class="col-xs-2">
            <div class="btn btn-danger alignment">Remove</div>
      </div>
    </div>
</div>
Hide result
+1

label form-group. form-group, display:inline-block . marge-left button, input button.

.forceInlineBlock {
   display: inline-block; 
}
.addLeftMargin25 {
    margin-left: 25px;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/>
<form class="form-inline">
  <label for="name">Name</label><br />
  <div class="form-group forceInlineBlock">
    <input type="text" class="form-control" id="name"  />
  </div>
  <button class="btn btn-danger addLeftMargin25">Remove</button>
</form>
Hide result
+1

, OP () BS3, , BS4 (, SCSS), mt-label mt-lg-label... ..

@each $breakpoint in map-keys($grid-breakpoints) {
    @include media-breakpoint-up($breakpoint) {
        $infix: breakpoint-infix($breakpoint, $grid-breakpoints);

        .mt#{$infix}-label {
            margin-top: $label-margin-bottom + ($line-height-base * $font-size-base);
        }
    }
}

( BS4 ) ( ), .

+1

, , 2015 , , , Bootstrap 4.3.1.

. - CSS - , , row, form-row, col padding margins .

, , :

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"/>
<div class='container'>
  <form>
    <div class="form-row">
      <div class="col-md-12">
        <label for="name">User data:</label>
        <div class="form-row">
          <div class="col-5">
            <input type="text" class="form-control" id="name" placeholder="Alex Ventura">
          </div>
          <div class="col-5">
            <div class="input-group">
              <div class="input-group-prepend">
                <span class="input-group-text">@</span>
              </div>
              <input type="text" class="form-control" placeholder="alexventuraio">
            </div>
          </div>
          <div class="col-2">
            <button type="submit" class="btn btn-primary">Contact</button>
          </div>
        </div>
      </div>
    </div>
  </form>
</div>
Hide result

I hope this can give an idea to someone else with the same problem. Here is my pen just for future reference.

0
source

More articles:


All Articles