如何在Twitter Bootstrap中獲得以移動爲中心的文本對齊：正確的對象？

Question

我想將標題和按鈕放在同一水平線上，但在頁面的相對兩側（左側和右側）。我使用的是Twitter Bootstrap，因此我將它們放在.row中，然後指定它們都是.col.sm-6。我把按鈕放在div中，所以我可以用text-align：right將它移動到該列的右側。

我怎樣才能讓這個按鈕在移動中心？當窗口變小並且第二列跳到第一列時，該按鈕仍然是右對齊的。

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css"> 

<div class="row"> 
    <h1 class="col-sm-6">Resources</h1> 
    <div class="col-sm-6" style="margin-top: 20px"> 
    <button style="text-align:right">Sign up your event</button> 
    </div> 
</div> 

Answer 1

您可以定義class爲您的按鈕像<button class="button">Sign up your event</button>然後用@media-queries使用以下CSS來居中，當窗口尺寸減小到移動寬度，像這樣：

@media (max-width: 768px) { 
    .button { 
      display: block; 
      margin: 0px auto; 
    } 
} 

這裏有一個工作演示（查看完整的頁面，然後降低你的瀏覽器窗口）：

.outfitcontainer { 
 
    position: relative; 
 
    width: 200px; 
 
    height: 80%; 
 
    background-color: #FFFFFF; 
 
    display: inline-block; 
 
    margin-left: 60px; 
 
    margin-top: 20px; 
 
    margin-bottom: 20px; 
 
    padding: 20px; 
 
} 
 
.outfit img { 
 
    display: inline-block; 
 
} 
 
.outfit, 
 
.overlay { 
 
    position: absolute; 
 
    width: 200px; 
 
    height: auto; 
 
    left: 0; 
 
} 
 
.outfit { 
 
    z-index: 10; 
 
    background-color: white; 
 
} 
 
.outfitcontainer:hover .outfit { 
 
    opacity: .5; 
 
    cursor: pointer; 
 
} 
 
.outfit:hover + .overlay { 
 
    z-index: 50; 
 
} 
 
.overlay:hover { 
 
    z-index: 50; 
 
} 
 
.overlay { 
 
    z-index: 0; 
 
    text-align: center; 
 
    font-weight: bold; 
 
} 
 
.overlay p { 
 
    display: block; 
 
    padding: 10px 0; 
 
    color: black; 
 
    opacity: 1; 
 
    line-height: 50%; 
 
} 
 
.overlay p:nth-child(1) { 
 
    margin-top: 50% 
 
} 
 
.price, 
 
.item { 
 
    font-family: "Brandon Grotesque Medium"; 
 
    font-size: 1em; 
 
    color: #000000; 
 
    line-height: 25%; 
 
    margin-top: -10px; 
 
} 
 
.oldprice { 
 
    text-decoration: line-through; 
 
    color: #383838; 
 
    font-size: .75em; 
 
    line-height: 25%; 
 
} 
 
.designer { 
 
    font-family: "Didot Light Italic"; 
 
    font-size: 1em; 
 
    color: #000000; 
 
    line-height: 25%; 
 
    margin-top: -15px; 
 
} 
 
.second-section { 
 
    width: 100%; 
 
    height: auto; 
 
    z-index: 50; 
 
    background-color: #000000; 
 
} 
 
.button { 
 
    text-align: right; 
 
} 
 
@media (max-width: 768px) { 
 
    .button { 
 
    display: block; 
 
    margin: 0px auto; 
 
    } 
 
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet"/> 
 
<div class="row"> 
 
    <h1 class="col-sm-6">Resources</h1> 
 

 
    <div class="col-sm-6" style="margin-top: 20px"> 
 
    <button class="button">Sign up your event</button> 
 
    </div> 
 
</div>