ボタンへのドロップダウンアライメント

Question

http://jsfiddle.net/em0nh0pw/のようにクリックしたボタンの中心に、<ul>ドロップダウンを配置しようとしていますが、使用する必要がある正しいプルまたはクラスを取得できないようです。具体的に

：

<button class="btn btn-primary dropdown-toggle" type="button" name="ttl_frontpage" id="ttl_frontpage" data-toggle="dropdown"> 
    <span class="badge">10 min</span>&nbsp;&nbsp; 
    <span class="glyphicon glyphicon-edit"></span> 
</button> 
<ul class="dropdown-menu" aria-labelledby="ttl_frontpage_menu"> 
<li><a href="#" data-value="60">1 min</a></li> 
[..] 
</ul> 

理想的には、私は両方の垂直方向と水平方向ボタンの上に中心<ul>メニューのショーを見てみたいが、右のいずれかのことを得るように見えることはできません。どんな助けでも大歓迎です！

Answer 1

あなたは、ULを中心に必要がある場合、それは簡単に移動Xを使用して行うことができます。

あなたは1を変更し、CSSの1行追加する必要があります。

left: 50%; /* instead of left: 0; */ 
transform: translateX(-50%); /* add this one */ 

JSFiddle

Answer 2

はここposition: absolute部門

$(".dropdown-menu li a").click(function() { 
 
    $(this).parents(".dropdown").find('.btn').html('<span class="badge">' + $(this).text() + ' </span>&nbsp;&nbsp;<span class="glyphicon glyphicon-edit"></span>'); 
 
    $(this).parents(".dropdown").find('input').val($(this).data('value')); 
 
});

.dropdown-menu{ 
 
    margin: auto; 
 
    position: absolute; 
 
    left: 33%; 
 
    right: 33%; 
 
}

<div class="panel-body"> 
 
    <form class="form-horizontal" method="post"> 
 
    <input type="hidden" name="domain" value="testwat.pro"> 
 

 
    <br> 
 
    <fieldset id="sbsets" class=""> 
 
     <div class="panel panel-primary"> 
 
     <div class="panel-heading panel-heading-custom"> 
 
      <h3 class="panel-title">Front Page Cache</h3> 
 
     </div> 
 
     <div class="panel-body"> 
 
      <div class="row"> 
 
      <div class="col-md-9" id="sbinfo"> 
 
       Configure how long requests for your front page should be cached for, in seconds. 
 
      </div> 
 
      <div class="col-md-3" align="center"> 
 
       <div class="dropdown pull-center"> 
 
       <input type="hidden" name="ttl_frontpage"> 
 
       <button class="btn btn-primary dropdown-toggle" type="button" name="ttl_frontpage" id="ttl_frontpage" data-toggle="dropdown"><span class="badge">10 min</span>&nbsp;&nbsp; 
 
        <span class="glyphicon glyphicon-edit"></span> 
 
       </button> 
 
       <ul class="dropdown-menu" aria-labelledby="ttl_frontpage_menu"> 
 
        <li><a href="#" data-value="60">1 min</a></li> 
 
        <li><a href="#" data-value="120">2 min</a></li> 
 
        <li><a href="#" data-value="300">5 min</a></li> 
 
        <li><a href="#" data-value="900">15 min</a></li> 
 
        <li><a href="#" data-value="1800">30 min</a></li> 
 
        <li><a href="#" data-value="3600">1 hour</a></li> 
 
        <li><a href="#" data-value="7200">2 hours</a></li> 
 
        <li><a href="#" data-value="10800">3 hours</a></li> 
 
        <li><a href="#" data-value="14400">4 hours</a></li> 
 
        <li><a href="#" data-value="18000">5 hours</a></li> 
 
        <li><a href="#" data-value="28800">8 hours</a></li> 
 
        <li><a href="#" data-value="43200">12 hours</a></li> 
 
        <li><a href="#" data-value="57600">16 hours</a></li> 
 
        <li><a href="#" data-value="86400">24 hours</a></li> 
 
       </ul> 
 
       </div> 
 
      </div> 
 
      </div> 
 
     </div> 
 
     </div> 
 
    </fieldset> 
 

 
    <div class="form-group"> 
 
     <div class="col-md-2"> 
 
     <input type="submit" id="save_settings" name="save_settings" value="Save" class="btn btn-primary"> 
 
     <input type="submit" id="reset_settings" name="reset_settings" value="Reset" class="btn btn-primary"> 
 
     </div> 
 
     <div class="col-md-10 control-label"> 
 
     <span><h5><i>Settings changes can take up to 2 minutes to take effect.</i></h5></span> 
 
     </div> 
 
    </div> 
 
    </form> 
 
</div>

ためleft : 0を削除する必要があり、デフォルトではすべてのdiv要素がblockどの手段としてレンダリングされ、ためです作業Demo

Answer 3

ですそれはブラウザからを選択します。ブートストラップは.dropdownクラスposition:relative;プロパティを与えました。そして、 'dropdown-menu'はposition:absolute;というプロパティを持っているので、デフォルトの動作は極端な左から始まります。 これをよく理解する必要があります。

適切な出力を得るには、2つの変更を加えます。 親のdivにtext-align:centerを使用し、.dropdownクラスとともにクラスを介してinline-blockプロパティを追加します。それはdisplay:block;から来る余分なwidthを取り除き、あなたの出力を適切に整列させます。

$(".dropdown-menu li a").click(function() { 
 
    $(this).parents(".dropdown").find('.btn').html('<span class="badge">' + $(this).text() + ' </span>&nbsp;&nbsp;<span class="glyphicon glyphicon-edit"></span>'); 
 
    $(this).parents(".dropdown").find('input').val($(this).data('value')); 
 
});

.inline-block { 
 
    display: inline-block; 
 
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" /> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
 
<div class="panel-body"> 
 
    <form class="form-horizontal" method="post"> 
 
    <input type="hidden" name="domain" value="testwat.pro"> 
 

 
    <br> 
 
    <fieldset id="sbsets" class=""> 
 
     <div class="panel panel-primary"> 
 
     <div class="panel-heading panel-heading-custom"> 
 
      <h3 class="panel-title">Front Page Cache</h3> 
 
     </div> 
 
     <div class="panel-body"> 
 
      <div class="row"> 
 
      <div class="col-md-9" id="sbinfo"> 
 
       Configure how long requests for your front page should be cached for, in seconds. 
 
      </div> 
 
      <div class="col-md-3 text-center" align="center"> <!-- to align child content in center --> 
 
       <div class="dropdown inline-block"> <!-- added inline-block class --> 
 
       <input type="hidden" name="ttl_frontpage"> 
 
       <button class="btn btn-primary dropdown-toggle" type="button" name="ttl_frontpage" id="ttl_frontpage" data-toggle="dropdown"><span class="badge">10 min</span>&nbsp;&nbsp; 
 
        <span class="glyphicon glyphicon-edit"></span> 
 
       </button> 
 
       <ul class="dropdown-menu" aria-labelledby="ttl_frontpage_menu"> 
 
        <li><a href="#" data-value="60">1 min</a> 
 
        </li> 
 
        <li><a href="#" data-value="120">2 min</a> 
 
        </li> 
 
        <li><a href="#" data-value="300">5 min</a> 
 
        </li> 
 
        <li><a href="#" data-value="900">15 min</a> 
 
        </li> 
 
        <li><a href="#" data-value="1800">30 min</a> 
 
        </li> 
 
        <li><a href="#" data-value="3600">1 hour</a> 
 
        </li> 
 
        <li><a href="#" data-value="7200">2 hours</a> 
 
        </li> 
 
        <li><a href="#" data-value="10800">3 hours</a> 
 
        </li> 
 
        <li><a href="#" data-value="14400">4 hours</a> 
 
        </li> 
 
        <li><a href="#" data-value="18000">5 hours</a> 
 
        </li> 
 
        <li><a href="#" data-value="28800">8 hours</a> 
 
        </li> 
 
        <li><a href="#" data-value="43200">12 hours</a> 
 
        </li> 
 
        <li><a href="#" data-value="57600">16 hours</a> 
 
        </li> 
 
        <li><a href="#" data-value="86400">24 hours</a> 
 
        </li> 
 
       </ul> 
 
       </div> 
 
      </div> 
 
      </div> 
 
     </div> 
 
     </div> 
 
    </fieldset> 
 

 
    <div class="form-group"> 
 
     <div class="col-md-2"> 
 
     <input type="submit" id="save_settings" name="save_settings" value="Save" class="btn btn-primary"> 
 
     <input type="submit" id="reset_settings" name="reset_settings" value="Reset" class="btn btn-primary"> 
 
     </div> 
 
     <div class="col-md-10 control-label"> 
 
     <span><h5><i>Settings changes can take up to 2 minutes to take effect.</i></h5></span> 
 
     </div> 
 
    </div> 
 
    </form> 
 
</div>