私のページにボタンを追加する方法（HTML上にボタンをレイアウトする）

Question

フィールドのサイズに影響を与えずに郵便番号の右側にボタンを追加したいと思います。

何か提案がありがとうございます。

私の元のマークアップ（画像が一致するものである）であった：

<div class="col-md-6 col-md-offset-3 text-center" style="border:solid"> 
    // All my fields... 
</div> 

それから試み：

<div class="col-md-3"></div> 
<div class="col-md-6"> 
    // All my fields using form-group 
</div> 
      <div class="col-md-3"> 
      <div class="form-group"></div> 
      <div class="form-group"></div> 
      <div class="form-group"></div> 
      <div class="form-group"></div> 
      <div class="form-group"></div> 
      <div class="form-group"></div> 
      <div class="form-group"> 
       @(Html.Kendo().Button() 
         .Name("btnLookup") 
         .Content("Lookup") 
       ) 
      </div> 
     </div> 

それがフォームの上部にボタンを配置しかし。私は、ページがどのように見えるボタンを追加する前に

：

Answer 1

は、あなたがdisplay: absolute経由でそれらを追加しようとしたことがありますか？

.form-group { 
 
    position: relative; 
 
} 
 
.lookup { 
 
    position: absolute; 
 
    top: 0; 
 
    right: -50px; 
 
    width: 40px; 
 
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/> 
 

 
<div class="container"> 
 
    <div class="row"> 
 
    <div class="col-xs-3"> 
 
     <div class="form-group"> 
 
     <input type="text" class="form-control" placeholder="Name"> 
 
     </div> 
 
     <div class="form-group"> 
 
     <input type="email" class="form-control" placeholder="Email"> 
 
     </div> 
 
     <div class="form-group"> 
 
     <input type="text" class="form-control" placeholder="Postal"> 
 
     <button class="btn btn-primary lookup"><i class="glyphicon glyphicon-search"></i> 
 
</button> 
 
     </div> 
 
     <div class="form-group"> 
 
     <input type="text" class="form-control" placeholder="City"> 
 
     </div> 
 
    </div> 
 
    </div> 
 
</div>