ブートストラップからの列のサイズを使用する単純なボタンを作成

私の考えは、単純な緑色のボタンを作成することです。テキストなし、枠線なし、緑色の形状のみ。ブートストラップからcol-md-12のサイズを継承します。私は多くの似たような質問があることを見てきましたが、私は基本的な理解に問題がありますので、理解していただければ幸いです。ブートストラップからの列のサイズを使用する単純なボタンを作成

<body> 
    <div class="col-md-12"> 
     <button class="button" type="button" style="border:none; display:inline-block; color:green;"></button> 
    </div> 
</body>

これは私のやり方です。私は体があり、私はcol-md-12クラスを持っています。これは大丈夫ですね。その後、ボタンを作成することにしました。私はボタンのタグclass=button、type=buttonを持っていて、このボタンをcol-md-12に表示するには、スタイル>シンプルな緑色とインラインブロックがあります。しかしながら！何も起こりません。どういうことなんですか？

私は目的のためにサイズを入れたくありません、私はちょうど全体のcol-md-12に合ってほしいです。私が正しく理解していないことを聞かせてもよろしいですか？ありがとうございました。

出典

2016-12-19 Testing man

あなたはブートストラップのどのバージョンを利用していますか？ – Gilbert

bootstrap 3、bootstrap.min.css –

ブートストラップのグリッドクラスは行内でのみ動作し、それらの行はコンテナ内になければなりません。また、伸ばしたい場合は、ボタンの幅を100％にする必要があります。 – j08691

j08691で言ったように、あなたはそれを正しく動作させるには、行の内側にあなたの列を埋め込むことがあります。

<body> 
    <div class="row"> 
     <div class="col-md-12"> 
      <button class="button" type="button" style="border:none; display:inline-block; color:green;"></button> 
     </div> 
    </div> 
</body>

しかし、デフォルトでは、あなたのボタンが全体のスペースを取りませんので、これは文句を言わない、十分なので、あなたそれにwidth: 100%;プロパティを追加する必要があります。

<body> 
    <div class="row"> 
     <div class="col-md-12"> 
      <button class="button" type="button" style="width: 100%; border:none; display:inline-block; color:green;"></button> 
     </div> 
    </div> 
</body>

デモ：https://jsfiddle.net/w1njoLL0/

出典

2016-12-19 17:08:16 AntoineB

私はあなたの2番目のコードを貼り付けてコピーしますが、何もありません。これは動作するので、私を挫折させる：

–

2番目のコードは私のために働いています。私は実際に動作しているデモを追加しました。 – AntoineB

O.K.私はでこんにちはを入力して、私はデモと同じソリューションを得る。しかし、私は本当にテキストのない緑色のボタンを手に入れたいと思っています。テキストを削除すると何も起こりません。ありがとうございました。 –

ちょうどボタンタグにクラスのフォーム・コントロール」を追加します。

JSFiddle

<div class="row"> 
    <div class="col-md-12"> 
     <button class="btn btn-success form-control" type="button">Hello</button> 
    </div> 
</div>

出典

2016-12-19 17:27:11

はいこれは動作しています。ありがとうございました。 –

@Testingman私の喜び:) –

ブートストラップからの列のサイズを使用する単純なボタンを作成

答えて

関連する問題