如何居中对齐测验标题中心下方的一组单选按钮并保持响应？
Posted
技术标签:
【中文标题】如何居中对齐测验标题中心下方的一组单选按钮并保持响应？【英文标题】：how to center align a group of radio buttons under the center of the quiz title and keep responsive? 【发布时间】：2016-07-29 06:35:08 【问题描述】：这里是在 bootstrap3 中重现问题的代码。
我想要的是对齐测验标题中心下方的单选按钮，同时保持文本左对齐。
当前标题默认为内联流 bs3 示例表单结构。
我在想如果使用
position absolute; or display:block/inline-block; margin-left:auto; margin-right:auto; display:flex; methods etc. 可能会破坏响应流。有什么建议你如何平衡响应和很好地对齐？
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<body>
<div class="main-content">
<div class="container-fluid">
<div class="row-fluid">
<div class="col-xs-12 col-sm-12 col-md-12 col-lg-12 text-center">
<h3 class="quiz-title" style="">Question: Do you think it's easy to center align the radio button groups and keep bootstrap responsive.</h3>
</div>
<div class="col-xs-12 ">
<div class="form-group">
<div class="radio">
<label for="Q2[score]" class="">
<input type="radio" name="Q2[score]" value="1" required="required">Agree
</label>
</div>
</div>
</div>
<div class="col-xs-12 ">
<div class="form-group">
<div class="radio">
<label for="Q2[score]"" class="">
<input type="radio" name="Q2[score]" value="2" required="required">Neither Agree nor Disagree
</label>
</div>
</div>
</div>
<div class="col-xs-12 ">
<div class="form-group">
<div class="radio">
<label for="Q2[score]" class="answered">
<input type="radio" name="Q2[score]" value="3" required="required">Disagree
</label>
</div>
</div>
</div>
</div>
<div class="clear-both" style="clear:both;"></div>
<div class="row-fluid">
<div class="col-xs-12 col-sm-12 col-md-12 col-lg-12 text-center">
<button type="button" class="NextQuizBTN btn btn-default">NEXT</button>
</div>
</div>
</div><!--end of container-fluid-->
</div>
</body>我在以下答案中收到了一些建议，使其在 bootstrap3 中看起来像中心对齐，但是我也使用上述方法发现了一些陷阱，如下图所示。
单选标签中的 Answer text 和 Quiz Title 文本长度都是可变的，因此在这种情况下，要使其居中对齐同时保持响应，这是一个棘手的部分使用 CSS。
【问题讨论】：
添加 .radio 类 text-align:center; 【参考方案1】：添加一些 CSS
.radiodisplay:inline-block;
使用text-center 将Class radio parent div 添加到col-xs-12
【讨论】：
你的意思是jsfiddle.net/a6j7p0et/2 但它使所有元素居中对齐，我希望单选按钮的组容器居中对齐，同时保持内部文本左对齐。或者你能更清楚地解释一下吗？ 如何将 class=center-block 添加到 div class=form-group 然后添加 remove text-center change class "col-sm-12" to "col-sm-7" & add class "col-sm-offset-5" jsfiddle.net/a6j7p0et/3【参考方案2】：您是否尝试将“col-xs-12”类更改为“col-xs-8 col-xs-offset-4”以使其居中？
【讨论】：
jsfiddle.net/a6j7p0et/6 使用“col-sm-7”查看上述建议并添加类“col-sm-offset-5”类设置，但是，col-xs-offset -* 方法似乎不够智能，无法适应不同长度的文本。【参考方案3】：您可以通过将所有单选按钮 div 包装在父 div 中来实现此目的。然后使用 offset 将此 div 相应地放置到设备上。
<div class="col-xs-8 col-xs-offset-4 col-sm-8 col-sm-offset-4 col-md-7 col-md-offset-5">
//.. all your radio buttons div's inside this
<div>
下面是工作的sn-p。检查一下。
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<body>
<div class="main-content">
<div class="container-fluid">
<div class="row-fluid">
<div class="col-xs-12 col-sm-12 col-md-12 col-lg-12 text-center">
<h3 class="quiz-title" style="">Question: Do you think it's easy to center align the radio button groups and keep bootstrap responsive.</h3>
</div>
<div class="form-group">
<input type="hidden" name="Q2[cat]" value="Conscientiousness">
</div>
<div class="form-group">
<input type="hidden" name="Q2[POST_ID]" value="88">
</div>
<div class="col-xs-8 col-xs-offset-4 col-sm-8 col-sm-offset-4 col-md-7 col-md-offset-5">
<div class="col-xs-12 ">
<div class="form-group">
<div class="radio">
<label for="Q2[score]" class="">
<input type="radio" name="Q2[score]" value="1" required="required">Agree
</label>
</div>
</div>
</div>
<div class="col-xs-12 ">
<div class="form-group">
<div class="radio">
<label for="Q2[score]"" class="">
<input type="radio" name="Q2[score]" value="2" required="required">Neither Agree nor Disagree
</label>
</div>
</div>
</div>
<div class="col-xs-12 ">
<div class="form-group">
<div class="radio">
<label for="Q2[score]" class="answered">
<input type="radio" name="Q2[score]" value="3" required="required">Disagree
</label>
</div>
</div>
</div>
</div>
</div>
<div class="clear-both" style="clear:both;"></div>
<div class="row-fluid">
<div class="col-xs-12 col-sm-12 col-md-12 col-lg-12 text-center">
<button type="button" class="NextQuizBTN btn btn-default">NEXT</button>
</div>
</div>
</div>
<!--end of container-fluid-->
</div>
</body>【讨论】：
以上是关于如何居中对齐测验标题中心下方的一组单选按钮并保持响应？的主要内容，如果未能解决你的问题，请参考以下文章
如何将“其他”文本输入添加到 HTML 表单中的一组单选按钮？
jQuery使用数据目标更改带有onClick侦听器的一组单选按钮标签的innerHtml