フォームタグでラップされたときにバルーマフォームコントロールの幅が制限されました

Bulmaのドキュメントに続いてinput.inputをp.controlにラップしてスタイルを設定し、コンテナの幅を広げることができます。しかし、コンテナがフォーム（それがある可能性が高い）の場合、コントロールはデフォルトサイズに縮小されます。私は間違って何をしていますか？以下フォームタグでラップされたときにバルーマフォームコントロールの幅が制限されました

コードサンプル：代わりに、フォームの

<div class="panel"> 
    <div class="panel-heading"> 
     Login 
    </div> 
    <div class="panel-block"> 
     <form> 
      <p class="control has-icon"> 
       <input class="input is-expanded" type="email" placeholder="E-mail Address" name="email" autofocus> 
       <span class="icon is-small"> 
        <i class="fa fa-envelope"></i> 
       </span> 
      </p> 
      <p class="control has-icon"> 
       <input class="input is-expanded" type="password" placeholder="Password" name="password"> 
       <span class="icon is-small"> 
        <i class="fa fa-lock"></i> 
       </span> 
      </p> 
      <p class="control"> 
       <button class="button is-success" type="submit"> 
        Login 
       </button> 
      </p> 
     </form> 
    </div> 
</div>

出典

2017-02-14 Kurucu

答えが見つかりました。面白いと私を見つめて：formのクラスをcontrolに設定する必要があります。

<div class="panel"> 
    <div class="panel-heading"> 
     Login 
    </div> 
    <div class="panel-block"> 
     <form class="control"> 
      <p class="control has-icon"> 
       <input class="input is-expanded" type="email" placeholder="E-mail Address" name="email" autofocus> 
       <span class="icon is-small"> 
        <i class="fa fa-envelope"></i> 
       </span> 
      </p> 
      <p class="control has-icon"> 
       <input class="input is-expanded" type="password" placeholder="Password" name="password"> 
       <span class="icon is-small"> 
        <i class="fa fa-lock"></i> 
       </span> 
      </p> 
      <p class="control"> 
       <button class="button is-success" type="submit"> 
        Login 
       </button> 
      </p> 
     </form> 
    </div> 
</div>

出典

2017-02-16 22:22:52 Kurucu

作業しました、ありがとうございます。 –

、あなたはパネルブロッククラスに各入力要素を同封する必要があります。

bulma panel documentation。

サンプルコード：

<!DOCTYPE html> 
<html> 
<head> 
    <meta charset="utf-8"> 
    <meta name="viewport" content="width=device-width"> 
    <title>JS Bin</title> 
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.3.1/css/bulma.min.css"> 
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css"> 
</head> 
<body> 
    <div class="panel"> 
    <div class="panel-heading"> 
     Login 
    </div> 

    <div class="panel-block"> 
     <p class="control has-icon"> 
     <input class="input is-expanded" type="email" placeholder="E-mail Address" name="email" autofocus> 
     <span class="icon is-small"> 
      <i class="fa fa-envelope"></i> 
     </span> 
     </p> 
    </div> 

    <div class="panel-block"> 
     <p class="control has-icon"> 
     <input class="input is-expanded" type="password" placeholder="Password" name="password"> 
     <span class="icon is-small"> 
      <i class="fa fa-lock"></i> 
     </span> 
     </p> 
    </div> 
    <div class="panel-block"> 
     <p class="control"> 
     <button class="button is-success" type="submit"> 
      Login 
     </button> 
     </p> 
    </div> 
</div> 

</body> 
</html>

ここJS Binです。

出典

2017-02-16 03:08:59 Angelo

フォームは入力範囲をどのように決定しますか？すなわち、フォームタグはどこに行くのですか？ – Kurucu

あなたのコードでは、インパクトを満たさない追加のパネルブロックも導入されています。 – Kurucu

フォームタグでラップされたときにバルーマフォームコントロールの幅が制限されました

答えて

関連する問題