Haml link_to imbrication

Question

Still quite new to rails environment, I am trying to render a link into an other one I would like to reproduce the list-group-custom-content component

Here is the haml content this is well rendered

%div{:class => ["list-group"]}
    - @tickets.each do |ticket|
        = link_to "#", :class => "list-group-item" do
            %div.row
                %div{:class => "col-sm-8"}
                    %h4{:class => "list-group-item-heading"}
                        Blabla
                    %p{:class => "list-group-item-text"}
                        blabla bla blabla
                %div{:class => "col-sm-4"}
                    other content

The corresponding rendered html

Here is the haml content that is going to fail

%div{:class => ["list-group"]}
    - @tickets.each do |ticket|
        = link_to "#", :class => "list-group-item" do
            %div.row
                %div{:class => "col-sm-8"}
                    %h4{:class => "list-group-item-heading"}
                        = link_to ticket.subject, "#"        -# <- Here is the problem
                    %p{:class => "list-group-item-text"}
                        blabla bla blabla
                %div{:class => "col-sm-4"}
                    other content

The corresponding rendered html

Could you help me please ?

Answer 1

It seems that the problem does not come from my haml template. Here is the rendered html

<div class='list-group'>
    <a class="list-group-item" href="#">
        <div class='row'>
            <div class='col-sm-8'>
                left
            </div>
            <div class='col-sm-4'>
                <p class='pull-right'>
                    <a href="#">Close</a> <!-- This link cause problem -->
                </p>
            </div>
        </div>
    </a>
    <a class="list-group-item" href="#">
        <div class='row'>
            <div class='col-sm-8'>
                left
            </div>
            <div class='col-sm-4'>
                <p class='pull-right'>
                    <a href="#">Close</a> <!-- This link cause problem -->
                </p>
            </div>
        </div>
    </a>
</div>

As soon as I insert the link marked as causing problem the layout is completly broken If I replace the link by

<button>Close</button>

It works Is it a bootstrap problem or something that is not suported ?

Should I close this question and open a new one ?