web-dev-qa-db-ja.com

Bootstrapボタンを全幅にする方法は？

これは私が今持っているものです。全幅になりません

ほぼ全幅

これはhtmlです。すでに.btn-blockクラスを追加しようとしましたが、ちょうど幅を使用した場合と同じ結果が得られます：100％; CSSで。多分問題は親要素にありますか？

<article class="col-xs-12 col-md-4">
            <div class="label label-success price"><span class="glyphicon glyphicon-tag"></span>$39</div>

            <div class="price-title">
                <h3>LOREM</h3>

                <small>Lorem Ipsum</small>
            </div>

            <div class="price-content ">
                <ul>
                    <li><h4>Item or Service # 1</h4></li>
                    <li><h4>Item or Service # 2</h4></li>
                    <li><h4>Item or Service # 3</h4></li>
                    <li><h4>Item or Service # 4</h4></li>
                    <li><h4>Item or Service # 5</h4></li>
                    <li><h4>Item or Service # 6</h4></li>
                </ul>

                <a href="#"><div class="btn btn-success">Sign Up</div></a>
            </div>
        </article>

そして、これらはスタイルです

#tables{
color: white;
text-align: center;
margin: 15px 20px;}


.price{
position: relative;
top: 20px;
font-size: 30px;}

.price-content{
background-color: #E8E9EA;
color: #69696A;
padding-right: 50px;
padding-top: 30px;
height: 350px;
margin-bottom: 80px;
width: 100%;}

.btn{
border-radius: 0px;
font-size: 20px;
font-weight: bold;
width: 100%;}
csstwitter-bootstrapbuttonwidth
9
Andrés Liu

さて、最初の質問...なぜaタグ内にdivをネストしているのですか？ <a href="#"><div class="btn btn-success">Sign Up</div></a>。これを試して：

<a class="btn btn-block btn-success" href="#">Sign Up</a>

次に、padding-right: 50px;セレクターから.price-contentを削除します。

23
Sean Stopnik

あなたが使っているからだと思います

padding-right：50px

に

.price-content

価格コンテンツdivの外にボタンを移動してみてください。

0
Stand Still