将四个按钮与Bootstrap均匀堆叠对齐？

时间：2017-01-23 14:22:20

标签： javascript html css twitter-bootstrap

我尝试将两排两个按钮叠放在一起，如下所示：

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

这些按钮需要位于屏幕中央，并均匀占据图片下方的空间。我对下面的代码非常接近，但无法使它们正确居中。我将如何更改代码以实现此目的：

[    Image     ]

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

我觉得我觉得这太复杂了。是否有更简单的方法在中心均匀堆叠按钮？谢谢！

＆＃13;
＆＃13; 
    /*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;
        }
＆＃13; 
     <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>
＆＃13;
＆＃13;
＆＃13;

7 个答案:

答案 0 :(得分：2)

我知道你已经接受了答案，但它似乎没有回答你的问题

首先，包含以下代码的内容必须包含text-align:center（在示例bootply中，我已将其放在body标记上）。

其次，我假设你因为类而使用bootstrap - 这没什么区别，但这就是为什么我在bootply中完成了这个例子。

第三，将所有元素包装在最大宽度为100％的内联元素中;

第四，使图像块和最大宽度为100％

第4，因为你的按钮似乎是内联块元素，你可以为它们添加box-sizing和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

以上是完全响应，直到图像的最大宽度

答案 1 :(得分：1)

你期待结果是这样的吗？
您可以使用bootstrap text-center类使按钮居中

＆＃13;
＆＃13; 
<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>
＆＃13;
＆＃13;
＆＃13;

答案 2 :(得分：1)

这是我的解决方案：

你可以使用Bootstrap的网格系统。这个想法是类“row”跨越父级的整个宽度，然后告诉每个按钮伸展其父级的25％（col-xs-3）。每行中的第一个按钮也需要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>

答案 3 :(得分：0)

您应该利用Bootstrap网格布局，即使是按钮：）

示例：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>

答案 4 :(得分：0)

添加一些行类，然后将按钮设为自己的列。

/*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>

答案 5 :(得分：0)

如果您使用的是bootstrap，那么使用网格系统为按钮创建一个简单的布局：

<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

答案 6 :(得分：0)

我为你尝试了一些东西：

小提琴：

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');
}
相关问题
最新问题