Bootstrap 3 - 使用具有锚标记的自定义 div 自定义列表组

Question

我是新来的Bootstrap 3.

我正在尝试在 Bootstrap 3.

中创建自定义组列表

我所做的是-

<div class="list-group">

    <!-- 1 Ideal Item -->
    <a href="#" class="list-group-item" id="baal">
        <h4 class="list-group-item-heading">
            Header
        </h4>
        <p class="list-group-item-text">
            Item
        </p>
    </a>
    <!-- End - 1 Ideal Item -->

    <a href="#" class="list-group-item disabled">
        Item selected and disabled
    </a>
    <a href="#" class="list-group-item">
        Morbi leo risus
    </a>
    <a href="#" class="list-group-item">
        Porta ac consectetur ac
    </a>
    <a href="#" class="list-group-item">
        Vestibulum at eros
    </a>
</div>

并得到这样的输出 -

如果我想用我自己的 div 具有 a 标签的列表来进一步自定义任何列表，我会遇到这样的问题 -

代码是-

<div class="list-group">

    <!-- 1 Ideal Item -->
    <a href="#" class="list-group-item" id="baal">
        <div>
            <div>
                Anything
                <div>
                    <a href="mailto:joe@example.com?subject=feedback" "email me">email me</a>
                </div>
            </div>
            <div>
                More thing
            </div>
        </div>
    </a>
    <!-- End - 1 Ideal Item -->

    <a href="#" class="list-group-item disabled">
        Item selected and disabled
    </a>
    <a href="#" class="list-group-item">
        Morbi leo risus
    </a>
    <a href="#" class="list-group-item">
        Porta ac consectetur ac
    </a>
    <a href="#" class="list-group-item">
        Vestibulum at eros
    </a>
</div>

Answer 1

您不能嵌套 <a> 标签（这是非法的 HTML）。

大多数浏览器在遇到这种情况时实际上会重组 DOM。这是 Chrome 在呈现时对您的 HTML 所做的事情：

<a href="#" class="list-group-item" id="baal">
    </a><div><a href="#" class="list-group-item" id="baal">
        </a><div><a href="#" class="list-group-item" id="baal">
            Anything
            </a><div><a href="#" class="list-group-item" id="baal">
                </a><a href="mailto:joe@example.com?subject=feedback" "email="" me"="">email me</a>
            </div>
        </div>
        <div>
            More thing
        </div>
    </div>

呸！难怪它看起来很乱。
您可以将内部 <a> 更改为 <span> 并使用 onclick 事件触发 emailto。请注意，您需要使用 CSS 手动将 <span> 标签样式设置为 link（颜色、悬停状态等）。 JSFIDDLE DEMO

<a href="#" class="list-group-item" id="baal">
    <div>
        <div>
            Anything
            <div>
                <span onclick="window.location.href = 'mailto:joe@example.com?subject=feedback'">email me</span>
            </div>
        </div>
        <div>
            More thing
        </div>
    </div>
</a>

Answer 2

您不能嵌套 a 标签。当您这样做时，浏览器将尝试通过在当前锚点之外创建一个新元素来恢复。看看这个例子，唯一的变化是我将内部 a 换成了 p.

<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.2/css/bootstrap.min.css">

<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap-theme.min.css">

<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>

<div class="list-group">

    <!-- 1 Ideal Item -->
    <a href="#" class="list-group-item" id="baal">
        <div>
            <div>
                Anything
                <div>
                    <p href="mailto:joe@example.com?subject=feedback" "email me">email me</p>
                </div>
            </div>
            <div>
                More thing
            </div>
        </div>
    </a>
    <!-- End - 1 Ideal Item -->

    <a href="#" class="list-group-item disabled">
        Item selected and disabled
    </a>
    <a href="#" class="list-group-item">
        Morbi leo risus
    </a>
    <a href="#" class="list-group-item">
        Porta ac consectetur ac
    </a>
    <a href="#" class="list-group-item">
        Vestibulum at eros
    </a>
</div>

Bootstrap 3 - 使用具有锚标记的自定义 div 自定义列表组

Bootstrap 3 - custom list group using a customized div having anchor tag

html

css

twitter-bootstrap

twitter-bootstrap-3