javascript - 如何将一组单选按钮居中对齐在测验标题的中心并保持响应?

标签 javascript html css forms twitter-bootstrap-3

这里是在 bootstrap3 中重现问题的代码。 我想要的是对齐测验标题中心下方的单选按钮,同时保持文本左对齐。 当前标题默认为内联流 bs3 示例表单结构。 我在想如果使用 绝对位置;或显示: block /内联 block ;左边距:自动;右边距:自动;显示: flex ;方法等。 可能会破坏响应流程。有什么建议可以很好地平衡响应和对齐吗?

<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]&quot;" 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 中看起来像居中对齐,但是我也发现了使用上述方法的一些陷阱,如下图所示。

radio 标签中的 Answer textQuiz Title 文本长度都是可变的,因此在这种情况下,要使其居中对齐同时保持响应是棘手的部分使用 CSS。

The effect produced by using col-sm-offset-* and below it, the Expected Effect regardless of how label text length changes

最佳答案

添加一些 CSS

.radio{display:inline-block;}

使用 text-center 添加 Class radio parent div 到 col-xs-12

关于javascript - 如何将一组单选按钮居中对齐在测验标题的中心并保持响应?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/36492098/

相关文章:

javascript - jquery获取href值并将其用作变量

javascript - 将鼠标悬停在 Meteor onRendered 函数中的 chart.js 值上会导致图表轴偏移

javascript - 非常奇怪的 JS/HTML 错误

css - 如何反转 -*-user-select :none;? 的效果

html - CSS 媒体查询未在指定宽度处激活。为什么不?

javascript - 如何增加这种弹性动画效果的振幅?

html - CSS/HTML 是由哪种编程语言定义的?

html - 使用 CSS 使这个主题适合浏览器窗口

CSS 布局固定宽度

javascript - 获取javascript中两个嵌套数组之间的差异