发表新帖
发表新帖

Bootstrap: align input with button

前端 未结
关注
12 581
栀梦
栀梦 2020-11-28 17:21

Why don\'t buttons and inputs align well in Bootstrap?

I tried something simple like:

相关标签:
12条回答
  • 清酒与你
    2020-11-28 17:50

    Bootstrap 4:

    <div class="input-group">
  <input type="text" class="form-control">
  <div class="input-group-append">
    <button class="btn btn-success" type="button">Button</button>
  </div>
</div>

    https://getbootstrap.com/docs/4.0/components/input-group/

    0 讨论(0)
  • 感动是毒
    2020-11-28 17:53

    Use .form-inline = This will left-align labels and inline-block controls for a compact layout

    Example: http://jsfiddle.net/hSuy4/292/

    <div class="form-inline">
<input type="text">
<input type="button" class="btn" value="submit">
</div>

    .form-horizontal = Right align labels and float them to the left to make them appear on the same line as controls which is better for 2 column form layout. 

    (e.g. 
Label 1: [textbox]
Label 2: [textbox]
     : [button]
)

    Examples: http://twitter.github.io/bootstrap/base-css.html#forms

    0 讨论(0)
  • 鱼传尺愫
    2020-11-28 17:53

    Take an input float as left. Then take the button and float it right. You can clearfix class when you take more than one to distance. 

    <input style="width:65%;float:left"class="btn btn-primary" type="text" name="name"> 
<div style="width:8%;float:left">&nbsp;</div>
<button class="btn btn-default" type="button">Go!</button>
<div class="clearfix" style="margin-bottom:10px"> </div>
    0 讨论(0)
  • 有刺的猬
    2020-11-28 17:54

    I tried above all and end-up with few changes which I would like to share. Here's the code which works for me (find the attached screenshot):

    <div class="input-group">
    <input type="text" class="form-control" placeholder="Search text">
    <span class="input-group-btn" style="width:0;">
        <button class="btn btn-default" type="button">Go!</button>
    </span>
</div>

    If you want to see it working, just use below code in you editor:

    <html>
    <head>
        <link type='text/css' rel='stylesheet' href='https://maxcdn.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css' />
    </head>
    <body>
        <div class="container body-content">
            <div class="form-horizontal">
              <div class="input-group">
                  <input type="text" class="form-control" placeholder="Search text">
                  <span class="input-group-btn" style="width:0;">
                      <button class="btn btn-default" type="button">Go!</button>
                  </span>
              </div>
            </div>
        </div>
    </body>
</html>

    Hope this helps.

    0 讨论(0)
  • 情深已故
    2020-11-28 17:57 
    style="padding-top: 8px"

    Use this to shift your div up or down in your row. Works wonders for me.

    0 讨论(0)
  • 离开以前
    2020-11-28 17:59 
    <form class="form-inline">
  <div class="form-group">
    <label class="sr-only" for="exampleInputEmail3">Email address</label>
    <input type="email" class="form-control" id="exampleInputEmail3" placeholder="Email">
  </div>
  <button type="submit" class="btn btn-default">Sign in</button>
</form>
    0 讨论(0)
 看不清?
提交回复
热议问题