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更自定义任何列表，我会遇到这样的问题 -

代码是 -

<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时对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事件触发电子邮件。注意，您需要使用CSS手动将<span>标记设置为手动链接（颜色，悬停状态等）。的 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的自定义列表组

2 个答案: