css - Bootstrap のポップオーバーが画面からはみ出す

Question

Bootstrap のポップオーバーに問題があります。ナビゲーションバーのドロップダウンメニューにフォームがあり、ポップオーバーが画面の上部に表示されます。さらに、ポップオーバーは本当に薄いです。これは状況です：

私はこのようなものを取得したいと思います:

問題は、そのポップオーバーの値を変更して機能させると、他のポップオーバーがうまくいかず、内部のテキストを変更すると収まらないことです。どうすればよいですか？ちなみに、これはコードです：

<li class="dropdown">
    <a class="dropdown-toggle" data-toggle="dropdown" href="#">
        <?php echo lang('register'); ?><b class="caret"></b>
    </a>
    <ul id="register" class="dropdown-menu form">
        <?php echo form_open('#'); ?>
            <input type="text" name="user" placeholder="<?php echo lang('login.username'); ?>">
            <input type="email" name="email" placeholder="<?php echo lang('reg.email'); ?>">
            <input type="password" name="pass" placeholder="<?php echo lang('login.password'); ?>">
            <input type="password" name="pass_conf" placeholder="<?php echo lang('reg.pass_conf'); ?>">
            <input class="btn btn-info" type="button" value="<?php echo lang('reg.submit'); ?>">
        </form>
    </ul>
</li>

PHPコードが少しありますが、構造はうまく表示されていると思います。その部分の CoffeeScript は次のとおりです。

username    = $('#register input[name="user"]')
if ( ! /^([\w_-]{4,15})$/.test(username.val()))
    username.addClass('error')
    username.popover({
        'placement': 'right'
        'trigger': 'manual'
        'title': user_not_valid_title
        'content': user_not_valid
    })
    username.popover('show')
    pass = false