右の応答ボタン付きのブートストラップdiv

Question

は、内部にいくつかの内容のdivと右側の応答ボタンなどの入力グループを持つ方法について、ブートストラップに問題がありました。私はまた、常に応答している右側にボタンをしたい。私は下のコードで試しましたが、これは正しいものではないようです。下記のデモをご覧ください。

.btn-custom { 
 
    position: absolute; 
 
    right: 5px; 
 
    height: 100%; 
 
    min-height: 100px; 
 
    top: -9px; 
 
    border-top-left-radius: 0px; 
 
    border-bottom-left-radius: 0px; 
 
}

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

 

 
<div class="container"> 
 
    <div class="row"> 
 
    <div class="col-md-6"> 
 
    <div class="well well-sm"> 
 
     <div class="row"> 
 
     <div class="col-xs-4"> 
 
      <img src="http://placehold.it/350x350" class="img-responsive img-circle" /> 
 
     </div> 
 
     <div class="col-xs-4"> 
 
      Lorem ipsum dolor sit. 
 
     </div> 
 
     <div class="col-xs-4 text-right"> 
 
      <a href="" class="btn btn-primary btn-custom">Go!</a> 
 
     </div> 
 
     </div> 
 
    </div> 
 
    </div> 
 
</div> 
 
</div>

私は以下のようなものをwan't。

Answer 1

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

 

 
<div class="container"> 
 
    <div class="row"> 
 
    <div class="col-md-6"> 
 
    <div class="well well-sm"> 
 
     <div class="row"> 
 
     <div class="col-xs-4"> 
 
      <img src="http://placehold.it/350x350" class="img-responsive img-circle" /> 
 
     </div> 
 
     <div class="col-xs-4"> 
 
      Lorem ipsum dolor sit. 
 
     </div> 
 
     <div class="col-xs-4"> 
 
      <div class="input-group"> 
 
    <input type="text" class="form-control" placeholder="Text Field" aria-describedby="basic-addon2"> 
 
    <a href="#" class="input-group-addon btn btn-primary" id="basic-addon2">Go</a> 
 
</div> 
 
     </div> 
 
     </div> 
 
    </div> 
 
    </div> 
 
</div> 
 
</div>

Answer 2

あなたはpull-rightで試してみましたか？

<div class="col-xs-4 text-right"> 
    <a href="" class="btn btn-primary btn-custom">Go!</a> 
</div>