Centering Bootstrap input fields

后端 未结 9 1232
执笔经年
执笔经年 2021-01-29 22:12

I am new with this, especially with Bootstrap. I have this code:

相关标签:
9条回答
  • 2021-01-29 23:01

    You can use offsets to make a column appear centered, just use an offset equal to half of the remaining size of the row, in your case I would suggest using col-lg-4 with col-lg-offset-4, that's (12-4)/2.

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

    Demo fiddle

    Note that this technique only works for even column sizes (.col-X-2, .col-X-4, col-X-6, etc...), if you want to support any size you can use margin: 0 auto; but you need to remove the float from the element too, I recommend a custom CSS class like the following:

    .col-centered{
        margin: 0 auto;
        float: none;
    }
    

    Demo fiddle

    0 讨论(0)
  • 2021-01-29 23:10

    For me this solution worked well to center an input field in a TD:

    <link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha/css/bootstrap.css" rel="stylesheet" />
    <td style="background:#B3AEB5;">
      <div class="form-group text-center">
        <div class="input-group" style="margin:auto;">
          <input type="month" name="p2" value="test">
        </div>
      </div>
    </td>

    0 讨论(0)
  • 2021-01-29 23:14

    Using offsets is not desired for responsive websites.

    Use a flexbox with justify content center:

    <div class="row d-flex justify-content-center">
      <input></input>
    </div>
    
    0 讨论(0)
提交回复
热议问题