将四个按钮与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均匀堆叠在一起？

回答

相关问题