twitter-bootstrap 如何将引导程序复选框表单居中

声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow 原文地址: http://stackoverflow.com/questions/39173271/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me): StackOverFlow

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-10-22 00:15:04  来源:igfitidea点击:

How to center bootstrap checkbox form

csstwitter-bootstraptwitter-bootstrap-3

提问by Pablo Vera

I need to center this checkboxesCould anybody help me center this checkboxes? i've try so many things already.

我需要把这个复选框居中谁能帮我把这个复选框居中?我已经尝试了很多东西。

here's my code:

这是我的代码:

  <div class="row checkbox-row">
              <div class="col-sm-6">
                <div class="checkbox-inline">
                  <label class="checkbox-inline"><input type="checkbox" value="">Adult News</label>
                </div>
              </div>
              <div class="row checkbox-row">
                <div class="col-sm-6">
                  <div class="checkbox-inline">
                    <label class="checkbox-inline"><input type="checkbox" value="">Youth News</label>
                  </div>
                </div>
              </div>
            </div>

采纳答案by Adam Buchanan Smith

How about something like this? https://jsfiddle.net/sxh0n7d1/20/

这样的事情怎么样?https://jsfiddle.net/sxh0n7d1/20/

since bootstrap rows are in a 12 column grid, I checkboxes to span 2 columns each, and moved the 4 columns to the right by 4.

由于引导行位于 12 列网格中,因此我选中了每个复选框以跨越 2 列,并将 4 列向右移动 4。

<div class="row checkbox-row">
  <div class="col-xs-2 col-xs-offset-4">
    <div class="checkbox-inline">
      <label class="checkbox-inline">
        <input type="checkbox" value="">Adult News</label>
    </div>
  </div>
  <div class="row checkbox-row">
    <div class="col-xs-2">
      <div class="checkbox-inline">
        <label class="checkbox-inline">
          <input type="checkbox" value="">Youth News</label>
      </div>
    </div>
  </div>
</div>

回答by Labradorcode

Try this

试试这个

  <div class="row checkbox-row">
              <div class="col-sm-6">
                <div class="checkbox-inline" style="text-align:center;">
                  <label class="checkbox-inline"><input type="checkbox" value="">Adult News</label>
                </div>
              </div>
              <div class="row checkbox-row">
                <div class="col-sm-6">
                  <div class="checkbox-inline" style="text-align:center;">
                    <label class="checkbox-inline"><input type="checkbox" value="">Youth News</label>
                  </div>
                </div>
              </div>
            </div>

回答by Kiran Kumar

May not be the best solution but works if you change the col-sm as per your page.

可能不是最好的解决方案,但如果您根据您的页面更改 col-sm 则有效。

<div class="col-sm-3"></div>
              <div class="col-sm-2">
                <div class="checkbox-inline">
                  <label class="checkbox-inline"><input type="checkbox" value="">Adult News</label>
                </div>
              </div>
              <div class="row checkbox-row">
                <div>
                  <div class="checkbox-inline">
                    <label class="checkbox-inline"><input type="checkbox" value="">Youth News</label>
                  </div>
                </div>
              </div>
            </div>
</div>