Bootstrap invoervelden centreren

Ik ben nieuw hierin, vooral met Bootstrap. Ik heb deze code:

<div class="row">
    <div class="col-lg-3">
       <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-6 -->
</div><!-- /.row -->

Ik moet dit invoerveld en deze knop in het midden van de pagina plaatsen:

Dit werkte niet: "margin-left: auto; margin-right:auto;"

Op webpagina ziet het er zo uit

Heeft iemand een idee?


Antwoord 1, autoriteit 100%

Je kunt offsets gebruiken om een ​​kolom gecentreerd te laten lijken, gebruik gewoon een offset die gelijk is aan de helft van de resterende grootte van de rij, in jouw geval raad ik aan om col-lg-4te gebruiken met col-lg-offset-4, dat is (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 viool

Merk op dat deze techniek alleen werkt voor even kolomgroottes (.col-X-2, .col-X-4, col-X-6, enz…), als je elke grootte wilt ondersteunen, kun je margin: 0 auto;gebruiken, maar je moet ook de float van het element verwijderen, ik raad een aangepaste CSS aan klasse als volgt:

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

Demo viool


Antwoord 2, autoriteit 8%

De beste manier om je element te centreren is door de .center-block-helperklasse te gebruiken. Maar moet uw bootstrap-versie niet minder dan 3.1.1

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha/css/bootstrap.css" rel="stylesheet" />
<div class="row">
  <div class="col-lg-3 center-block">
    <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-6 -->
</div>
<!-- /.row -->

Snippet uitvouwen


Antwoord 3, autoriteit 8%

Probeer deze stijl toe te passen op uw div class="input-group":

text-align:center;

Bekijk het: Fiddle.


Antwoord 4

in b4 kunt u ook d-flex rechtvaardigen-content-centergebruiken

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<div class="form-group">
    <div class="d-flex justify-content-center">
    <input type="text" class="form-control">
     <span class="input-group-btn">
         <button class="btn btn-default" type="button">Go!</button>
     </span>
    </div>      
</div>

Other episodes