css - 在网格内使用标签和按钮

Question

在第一列中，是否可以使用标签而不是按钮？在视觉上我想要与标签或按钮相同，但我不希望它是可点击的。正文也出来了。我试图让按钮更小，但它不接受 width。

FIDDLE

<div>
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <div class="modal-header">
                <h4 class="modal-title"><span>AA</span></h4>
            </div>
            <div class="modal-body">
                <form role="form" class="container-fluid">
                    <div class="form-group col-md-6">
                        <label>Text</label>
                        <div class="btn-group btn-group-justified">
                            <a href="#"  class="btn btn-warning">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla laoreet eget neque</a>
                            <a href="" class="btn btn-warning">BUTTON</a>
                        </div>
                    </div>
                    <div class="col-md-6">
                        <label>Text 2</label>
                        <div class="btn-group btn-group-justified">
                            <a href="" class="btn btn-warning">BUTTON 2</a>
                        </div>
                    </div>
                </form>
            </div>
            <div class="modal-footer">
                <a class="btn btn-default" href="#">Cancelar</a>
            </div>
        </div>
    </div>
</div>

Answer 1

Visually I want the same as a label or a button, but I don't wanna it to be clickable.

最好的方法是在元素上添加 disabled 属性。然后使用您自己的类抵消降低的不透明度

HTML

<a href="#" class="btn btn-warning myClass btn-sm" disabled>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla laoreet eget neque</a>

CSS

.myClass[disabled] {
    opacity: 1;
}

---

The text is getting out too.

只需将其添加到上面的 CSS 规则集中即可

white-space: normal;

---

And I was trying to make the button smaller but it isn't accepting width.

btn-group-justified 类中 btn 的显示是表格单元格，所有列的宽度设置为 1%。所以你必须设置你的宽度，记住 1% 是默认值。

例如，对于一个 2 列的按钮组，下面的代码为 25%

width: 0.5%;

---

完整的 CSS 是

.myClass[disabled] {
    opacity: 1;
    white-space: normal;
    width: 0.5%;
}

---

fiddle - http://jsfiddle.net/wr78t8ug/