2017-08-25 32 views
0

进出口使用布尔玛框架,如何运动按钮与输入字段相同的行?它看起来输入字段是全宽布尔玛CSS - 按键在输入字段

我的代码:

<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>