Bootstrap3でフォームボタンのサイズをどのようにするか？

視覚的なボタンの幅を固定して、それぞれに固定幅をハードコードしないようにするにはどうすればいいですか？ここでBootstrap3でフォームボタンのサイズをどのようにするか？

（これは依存テキストのように）、ボタンの任意のサイズで動作するユニバーサルソリューションは、そこです切り取ら：

<div class="btn-toolbar"> 
<button class="btn-success btn btn-default" name="resolution" value="corrected" type="submit">Submit</button> 
<div class="pull-right btn-group"> 
<button class="btn-warning btn btn-default" name="resolution" value="skipped" type="submit">Skip</button> 
<button class="btn-warning btn btn-default" name="resolution" value="not_found" type="submit">Not found</button> 
</div> 
</div>

出典

2016-11-02 Antoniossss

は、彼らがそれぞれのボタンに固定サイズを設定せずに –

ちょうどあなたのボタンのCSSルールを追加するには、ボタンの上に同じ幅を置きますか？（ビア幅がアタチュュートまたはスタイルの場合は問題ありません） –

はどのようにそれを行うには同等の大きさを持っているでしょうので – Antoniossss

すべてを作るために良いことではありませんボタンの幅はボタンのテキストに依存するため、ボタンの幅は固定されています。それは良く見えません。しかし、それがあなたのために必要ならば、ボタンにクラスを追加し、あなたのCSSルールでそのクラスに固定幅を割り当てることができます。または、あなたもあなたのCSSのボタンに固定幅を直接設定してください。しかし、私はそれが良いように見えないので、それをしないことを強くお勧めします。

.fixed_width{ 
    width:**YOUR_DESIRED_WIDTH_GOES_HERE**; 
}

あなたのCSSファイルを直接割り当てることによって、クラス

<button class="btn-warning btn btn-default fixed_width" name="resolution" value="skipped" type="submit">Skip</button>

を追加することによって、シナリオ

両方のためのコードを追加 -

button{ 
    width:**YOUR_DESIRED_WIDTH_GOES_HERE**; 
}

出典

2016-11-02 06:42:50

をあなただけでこれを行うことができますスタイルのボタンの必要な幅を設定します。ここの例では、必要な幅を100ピクセルに指定しています。これを必要な値にすることができます。

<!DOCTYPE HTML> 
 
<html> 
 
    <head> 
 
     <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
     <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> 
 
     <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
 
     <style> 
 
     .btn{ 
 
      width: 100px; 
 
     } 
 
     </style> 
 
    </head> 
 
    <body> 
 
    <div class="btn-toolbar"> 
 
     <button class="btn-success btn btn-default" name="resolution" value="corrected" type="submit">Submit</button> 
 
     <div class="pull-right btn-group"> 
 
      <button class="btn-warning btn btn-default" name="resolution" value="skipped" type="submit">Skip</button> 
 
      <button class="btn-warning btn btn-default" name="resolution" value="not_found" type="submit">Not found</button> 
 
     </div> 
 
    </div> 
 
    </body> 
 
</html>

出典

2016-11-02 06:47:46 Nitheesh

Bootstrap3でフォームボタンのサイズをどのようにするか？

答えて

関連する問題