Bootstrap文本中心不能處理按鈕

Question

所以我一直試圖在引導程序中將這兩個按鈕居中一段時間​​。 我發現已經有一個名為“text-center”的bootstrap css類，所以我試圖使用它但不幸的是無論我在哪里使用它，它都沒有改變任何東西。

  <div class="form-group"> <div class="col-sm-10 text-center"> <button type="submit" class="btn btn-default">Submit</button> <button type="reset" class="btn btn-default">Reset</button> </div> </div> 

代碼是一種形式，在井中，如果您需要更多信息，請告訴我。 謝謝

Answer 1

使用.center-block類，這是在bootstrap框架中居中元素的最佳方法

<div class="form-group">
<div class="col-sm-10 center-block">
  <button type="submit" class="btn btn-default">Submit</button>
  <button type="reset" class="btn btn-default">Reset</button>
</div>
</div>

Answer 2

一旦包含bootstrap css文件，您的代碼片段就會起作用（見下文）。 您可能有其他代碼影響頁面的這一部分 - 嘗試檢查瀏覽器控制台以查看哪些樣式覆蓋了您的預期樣式。

如果你不想使用col-sm-12，你還需要使用偏移值來“居中”你的col-sm-10

 <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet"/> <div class="form-group"> <div class="col-sm-10 col-sm-offset-1 text-center"> <button type="submit" class="btn btn-default">Submit</button> <button type="reset" class="btn btn-default">Reset</button> </div> </div>