在bootstrap表单字段中用箭头定位div

Question

我试图在bootstrap表单字段中用箭头定位div，但指向箭头指向下一行。这是我的代码：

     <h3>Rregistration </h3>
            <div class="control-group">
                <label class="control-label" for="inputName">Name</label>
                <div class="controls">
                <input type="text" id="inputName" placeholder="Name">
                </div>
            </div> 
                    <div class="container">
                        <div id="pointer"></div>
                    </div>

和CSS

        .container {
                margin-top: 10px;
        }

        body {background:#ff004e;padding:40px}
            .container {
            background:white; 
            -webkit-border-radius: 10px;
            -moz-border-radius: 10px;
            border-radius: 10px; 
            width:250px; 
            height:100px;
            display: block;
            position: relative;
            }

            #pointer{
            border-right:solid 20px #FFF;
           /*  border-left: solid 5px transparent;   */  
            border-top: solid 10px transparent;
            border-bottom: solid 10px transparent;
            position:absolute;
            width: 0;
            height: 0;
            top: 10px;
            left:-20px
            }

JsFiddle链接在这里：http://jsfiddle.net/barnamah/Epj6z/13/

Answer 1

试试这个

http://jsfiddle.net/Epj6z/15/

<h3>Rregistration </h3>
    <div class="control-group">
        <label class="control-label" for="inputName">Name</label>
        <div class="controls">
        <input type="text" id="inputName" placeholder="Name" style="float:left">
           <div class="span3">
                <div id="pointer"></div>
            </div>
        </div>

    </div> 


body {background:#ff004e;padding:40px}
.span3 {
    background:white; 
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    border-radius: 10px; 
    width:250px; 
    height:100px;
    display: block;
    position: relative;
}