100％幅のボタングループ？

ブートストラップフレームワークを使用して、黄色のパネルでボタングループを100％に設定する方法はありますか？側には、パディングがあってはならない https://jsfiddle.net/DTcHh/34406/100％幅のボタングループ？

：

は、例を参照してください。

<div class="container"> 
    <div class="row"> 
    <div class="col-md-8" style="background-color:pink; height: 500px"> 
     Content here 
    </div> 

    <div class="col-md-3" style="background-color:yellow; height: 500px"> 
     <div class="btn-group" role="group" aria-label="Basic example"> 
     <button type="button" class="btn btn-danger">Delete</button> 
     <button type="button" class="btn btn-primary">Duplicate</button> 
     </div> 
    </div> 
    </div> 
</div>

出典

2017-06-30 I' ll-Be-Back

あなたのボタングループは 'inline-block'なので' block'に変更するか、 'width：100％'にする必要があります – Pete

これを確認してください。私はあなたが望むもので新しいものを作った。

https://jsfiddle.net/exuLo7f7/

<!DOCTYPE html> 
<html lang="en"> 
<head> 
    <title>Bootstrap Example</title> 
    <meta charset="utf-8"> 
    <meta name="viewport" content="width=device-width, initial-scale=1"> 
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> 
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 

<style> 

.col-md-3{ 
    margin:0px!important; 
    padding:0px!important; 
} 
</style> 
</head> 
<body> 

<div class="container"> 
    <h2>Justified Button Groups</h2> 
    <div class="row"> 
    <div class="col-md-9" style="background-color:yellow;">dsaaaaaaaasadsadsadsadsadsadsadsadsadsadsadsadsadsadsadsad</div> 
    <div class="col-md-3" style="background-color:black;"> 
    <div class="btn-group btn-group-justified"> 
    <div class="btn-group"> 
     <button type="button" class="btn btn-primary">Apple</button> 
    </div> 
    <div class="btn-group"> 
     <button type="button" class="btn btn-primary">Samsung</button> 
    </div> 
    <div class="btn-group"> 
     <button type="button" class="btn btn-primary">Sony</button> 
    </div> 
    </div> 
    </div> 
    </div> 
</div> 

</body> 
</html>

出典

2017-06-30 15:32:23

ブートストラップはgenuily col- *クラスに15ピクセルのパディングを追加します。

これらの埋め込みを取り除きたい場合は、強制的に取り除く必要があります。私は、このクラスを追加しました：

.no-padding { 
    padding : 0 !important; 
}

をし、それがthese resultsを与えました。

希望します。

出典

2017-06-30 15:40:05 Wail

100％幅のボタングループ？

答えて

関連する問題