2017-08-25 4 views
0

イム、どのように入力フィールドが全幅ブルマCSS - ブルマFrameworkを使用して、入力フィールドにボタン

私のコードであるに見える?入力フィールドと同じ行にボタンを移動:

<div class="container"> 
<div class="field"> 
    <div class="control has-icons-left has-icons-right"> 
    <input type="text" class="input is-info is-large" placeholder="Input number in seconds"> 
    <span class="icon is-medium is-left"> 
     <i class="fa fa-futbol-o"></i> 
    </span> 
    </div>  
</div> 
<a class="button is-info">GO</a> 

結果Result image

答えて

0

http://bulma.io/documentation/form/general/#form-addons

あなたはこのような権利ではなく、あなたが(ここで入力し、ボタン)コントロールを「マージ」するhas-addonsクラスを使用することができます 入力、内部のボタンたい場合:

<link href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.5.1/css/bulma.min.css" rel="stylesheet"/> 
 
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/> 
 
<div class="container"> 
 
    <div class="field has-addons"> 
 
    <div class="control has-icons-left"> 
 
     <input type="text" class="input is-info is-large" placeholder="Input number in seconds"> 
 
     <span class="icon is-medium is-left"> 
 
     <i class="fa fa-futbol-o"></i> 
 
     </span> 
 
    </div> 
 
    <div class="control"> 
 
     <a class="button is-info is-large">GO</a> 
 
    </div> 
 
    </div> 
 
</div>

関連する問題