將四個按鈕與Bootstrap均勻堆疊在一起？

我想有有堆放在彼此的頂部像下面有兩個按鈕兩行：將四個按鈕與Bootstrap均勻堆疊在一起？

[button][button] 
[button][button]

這些按鈕需要在屏幕的中心，並均勻地拿起圖片下方的空間。我非常接近下面的代碼，但不能讓它們正確居中。我將如何更改我的代碼來完成此操作：

[ Image  ] 

[button][button] 
[button][button]

另外我覺得我讓這個過於複雜。是否有更簡單的方法將按鈕均勻地堆疊在中心？謝謝！

/*Four Button Set-up*/ 
 
     
 
     .buttonAnswerLeft{ 
 
      width: 25%; 
 
      max-width: 800px; 
 
      font-size: 25px; 
 
      display: inline-block; 
 
      text-align:center;  
 
     } 
 
     
 
     .buttonAnswerRight{ 
 
      width: 25%; 
 
      max-width: 800px; 
 
      font-size: 25px; 
 
      display: inline-block; 
 
      text-align:center; 
 
      float: left; 
 
     }

 <img class='image center-block' id='image6' src='http://mooxidesign.com/wp-content/uploads/2015/04/Online-Education.jpg'> 
 
       </div> 
 
     
 
       <div class="button-box col-lg-12 col-xs-12"> 
 
       <button id='' type="button" class='buttonAnswerLeft noCollegeForSure buttonsQuestion6 btn btn-info '> Absolutely sure, I'm not going.</button> 
 
       <button id='' type="button" class='buttonAnswerRight noCollegeForSure buttonsQuestion6 btn btn-info '> Pretty sure I'm not going. </button> 
 
       </div> 
 
       <div class="button-box col-lg-12 col-xs-12"> 
 
       <button id='' type="button" class='buttonAnswerLeft maybeCollege buttonsQuestion6 btn btn-info '> It's doubtful. </button> 
 
       <button id='' type="button" class='buttonAnswerRight maybeCollege buttonsQuestion6 btn btn-info '> It's a maybe. </button> 
 
      </div> 
 
     </div> 
 
    </div>

來源

2017-01-23 AndrewLeonardi

我知道你已經接受一個答案已，但它似乎並沒有回答你的問題

首先，無論包含下面的代碼必須在它上面有text-align:center（在示例中，我已經把它放在了body標籤上）。

其次，我假定你正在使用引導因爲類 - 這沒有什麼區別，但這就是爲什麼我在bootply中完成了這個例子。第三，將所有元素都包含在最大寬度爲100％的內聯元素中;

第四，使圖像塊和100％的最大寬度

4個作爲你的按鈕似乎是inline-block的元素，你可以添加盒的尺寸和50％的寬度給他們，然後註釋掉空間其間，那麼你應該實現你所追求的

body { 
 
    text-align: center; 
 
} 
 
.image-container { 
 
    display: inline-block; 
 
    max-width: 100%; 
 
} 
 
.image-container .image { 
 
    display: block; 
 
    max-width: 100%; 
 
} 
 
button { 
 
    width: 50%; 
 
    box-sizing: border-box; 
 
}

<div class="image-container"> 
 
    <img class="image center-block" id="image6" src="http://mooxidesign.com/wp-content/uploads/2015/04/Online-Education.jpg"> 
 

 
    <div class="button-box col-lg-12 col-xs-12"><!-- 
 
    --><button id="" type="button" class="buttonAnswerLeft noCollegeForSure buttonsQuestion6 btn btn-info "> Absolutely sure, I'm not going.</button><!-- 
 
    --><button id="" type="button" class="buttonAnswerRight noCollegeForSure buttonsQuestion6 btn btn-info "> Pretty sure I'm not going. </button><!-- 
 
    --></div> 
 
    <div class="button-box col-lg-12 col-xs-12"><!-- 
 
    --><button id="" type="button" class="buttonAnswerLeft maybeCollege buttonsQuestion6 btn btn-info "> It's doubtful. </button><!-- 
 
    --><button id="" type="button" class="buttonAnswerRight maybeCollege buttonsQuestion6 btn btn-info "> It's a maybe. </button><!-- 
 
    --></div> 
 
</div>

Example bootply

以上是完全響應的圖像的最大寬度

來源

2017-01-23 16:17:40 Pete

皮特這解決了一切！非常感謝您花時間做到這一點。這有很多答案，但正如你所說，沒有一個是100％的解決方案。這個竅門！謝謝！ – AndrewLeonardi

你應該爲人們建立一種「買你一杯咖啡」的方法。 – AndrewLeonardi

你期待的結果是這樣的？
您可以使用引導text-center類，使按鈕中心

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" /> 
 
<img class='image center-block col-lg-12 col-xs-12 col-md-12' id='image6' src='http://mooxidesign.com/wp-content/uploads/2015/04/Online-Education.jpg'> 
 
</div> 
 

 
<div class="button-box col-lg-12 col-xs-12 col-md-12 text-center"> 
 
    <button id='' type="button" class='buttonAnswerLeft noCollegeForSure buttonsQuestion6 btn btn-info '>Absolutely sure, I'm not going.</button> 
 
    <button id='' type="button" class='buttonAnswerRight noCollegeForSure buttonsQuestion6 btn btn-info '>Pretty sure I'm not going.</button> 
 
</div> 
 
<div class="button-box col-lg-12 col-xs-12 text-center"> 
 
    <button id='' type="button" class='buttonAnswerLeft maybeCollege buttonsQuestion6 btn btn-info '>It's doubtful.</button> 
 
    <button id='' type="button" class='buttonAnswerRight maybeCollege buttonsQuestion6 btn btn-info '>It's a maybe.</button> 
 
</div> 
 
</div> 
 
</div>

來源

2017-01-23 14:31:01

@AndrewLeonardi如果我的解決方案解決了您的問題，您可以通過單擊答案旁邊的勾號來標記答案：D。快樂的編碼。 –

嘿！非常有幫助謝謝。幾乎完美。我試圖讓按鈕佔據圖像下方的整個空間。所以左右各有50％。我會怎麼做呢？ – AndrewLeonardi

你應該採取引導網格佈局的優勢，即使是你的按鈕:)

例子：http://codepen.io/anon/pen/MJoavP

我做了兩個不同的按鈕行，所以你可以檢查差異

<div class="container"> 
    <div class="row"> 
    <img class='image center-block' id='image6' src='http://mooxidesign.com/wp-content/uploads/2015/04/Online-Education.jpg'> 
    </div> 
    <hr> 
    <div class="row"> 
     <button id='' type="button" class='buttonAnswerLeft noCollegeForSure buttonsQuestion6 btn btn-info col-md-5 pull-left'> Absolutely sure, I'm not going.</button> 
     <button id='' type="button" class='buttonAnswerRight noCollegeForSure buttonsQuestion6 btn btn-info col-md-5 pull-right'> Pretty sure I'm not going. </button> 
    </div> 
    <div class="row"> 
     <button id='' type="button" class='buttonAnswerLeft maybeCollege buttonsQuestion6 btn btn-info col-md-6'> It's doubtful. </button> 
     <button id='' type="button" class='buttonAnswerRight maybeCollege buttonsQuestion6 btn btn-info col-md-6'> It's a maybe. </button> 
    </div> 
</div>

來源

2017-01-23 14:39:56

添加一些行類，然後使按鈕成爲自己的列。

/*Four Button Set-up*/ 
 

 
    .buttonAnswerLeft{ 
 
     width: 100%; 
 
     max-width: 800px; 
 
     font-size: 50px; 
 
     display: inline-block; 
 
     text-align:center; 
 

 

 
    } 
 

 
    .buttonAnswerRight{ 
 
     width: 100%; 
 
     max-width: 800px; 
 
     font-size: 25px; 
 
     display: inline-block; 
 
     text-align:center; 
 
     float: left; 
 
    }

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"> 
 

 
<div class="row"> 
 

 
<div class="col-lg-12 col-xs-12"> 
 
<img class='image center-block' id='image6' src='http://mooxidesign.com/wp-content/uploads/2015/04/Online-Education.jpg' width="100%"> 
 
</div> 
 
    </div>   
 
      <div class="row"> 
 
      <div class="button-box col-lg-6 col-xs-6"> 
 
      <button id='' type="button" class='buttonAnswerLeft maybeCollege buttonsQuestion6 btn btn-info '> It's doubtful. </button> 
 
     </div> 
 
      <div class="button-box col-lg-6 col-xs-6"> 
 
      <button id='' type="button" class='buttonAnswerLeft maybeCollege buttonsQuestion6 btn btn-info '> It's doubtful. </button> 
 
     </div> 
 
     </div> 
 
<div class="row"> 
 
      <div class="button-box col-lg-6 col-xs-6"> 
 
      <button id='' type="button" class='buttonAnswerLeft maybeCollege buttonsQuestion6 btn btn-info '> It's doubtful. </button> 
 
     </div> 
 
      <div class="button-box col-lg-6 col-xs-6"> 
 
      <button id='' type="button" class='buttonAnswerLeft maybeCollege buttonsQuestion6 btn btn-info '> It's doubtful. </button> 
 
     </div> 
 
     </div>

來源

2017-01-23 14:40:44 Jman

如果您正在使用引導，然後使用網格系統以創建按鈕的簡單layour：

<div class="row"> 
    <div class="col-xs-4 col-xs-offset-4"> <!-- set this to the required width and offset --> 
     <img class='image' id='image6' src='http://mooxidesign.com/wp-content/uploads/2015/04/Online-Education.jpg'> 
    </div> 
</div> 

<div class="row"> 
<div class="col-xs-4 col-xs-offset-4"> <!-- Set this to your required width and offset --> 
    <div class="row"> 
     <div class="col-xs-6"> 
      <button class="btn btn-block" type="button">Button 1</button> 
     </div> 
     <div class="col-xs-6"> 
      <button class="btn btn-block" type="button">Button 2</button> 
     </div> 
    </row> 
    <div class="row"> 
     <div class="col-xs-6"> 
      <button class="btn btn-block" type="button">Button 3</button> 
     </div> 
     <div class="col-xs-6"> 
      <button class="btn btn-block" type="button">Button 4</button> 
     </div> 
    </div> 
</div> 
</div>

http://getbootstrap.com/css/#grid

來源

2017-01-23 14:43:03

這裏是我的解決方案：

you ca n使用Bootstrap的網格系統。我們的想法是，類「行」跨越父級的全部寬度，然後告訴每個按鈕伸展其父級（col-xs-3）的25％。每行中的第一個按鈕也需要25％的偏移量（col-xs-offset-3）。

我建議閱讀有關網格系統：http://getbootstrap.com/css/#grid

<!-- Latest compiled and minified CSS --> 
 
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"> 
 

 
<!-- Optional theme --> 
 
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous"> 
 

 

 

 
<div > 
 
    <div> 
 
    <div> 
 
     <img class='image center-block img-responsive' id='image6' src='http://mooxidesign.com/wp-content/uploads/2015/04/Online-Education.jpg'> 
 
      </div> 
 

 
      <div class="button-box row"> 
 
      <button id='' type="button" class='buttonAnswerLeft noCollegeForSure buttonsQuestion6 btn btn-info col col-xs-3 col-xs-offset-3 '> Absolutely sure, I'm not going.</button> 
 
      <button id='' type="button" class='buttonAnswerRight noCollegeForSure buttonsQuestion6 btn btn-info col col-xs-3'> Pretty sure I'm not going. </button> 
 
      </div> 
 
      <div class="button-box row"> 
 
      <button id='' type="button" class='buttonAnswerLeft maybeCollege buttonsQuestion6 btn btn-info col col-xs-3 col-xs-offset-3 '> It's doubtful. </button> 
 
      <button id='' type="button" class='buttonAnswerRight maybeCollege buttonsQuestion6 btn btn-info col col-xs-3'> It's a maybe. </button> 
 
     </div> 
 
    </div> 
 
</div>

來源

2017-01-23 14:44:03

謝謝！幾乎完美。這是不是很敏感，所以我改變了它有點這個伎倆： col-lg-3 col-lg-offset-3 col-xs-4 col-xs-offset-2 – AndrewLeonardi

很高興成爲的幫助 –

你有沒有機會知道如何讓按鈕匹配圖像的寬度？像每個按鈕應占用圖像寬度的50％左右？ – AndrewLeonardi

我想東西給你：

小提琴：

JSFiddle

HTML：

<div id="img-div" class="col-xs-12"> 
</div> 
<div class="row"> 
    <!-- Set this to your required width and offset --> 
    <div class="row"> 
    <div class="col-xs-6"> 
     <button class="btn btn-block" type="button">A</button> 
    </div> 
    <div class="col-xs-6"> 
     <button class="btn btn-block" type="button">B</button> 
    </div> 
    </div> 
    <div class="row"> 
    <div class="col-xs-6"> 
     <button class="btn btn-block" type="button">C</button> 
    </div> 
    <div class="col-xs-6"> 
     <button class="btn btn-block" type="button">D</button> 
    </div> 
    </div> 
</div>

CSS：

.btn { 
    width: 100%; 
} 
#img-div  
{ 
    width: 100%; 
    height: 600px; 
    background-size: cover; 
    background-image: url('http://i.dailymail.co.uk/i/pix/2013/10/22/article-2471794-18E82E4300000578-360_638x405.jpg'); 
}

來源

2017-01-23 14:56:40

將四個按鈕與Bootstrap均勻堆疊在一起？

回答

相關問題