クイズのタイトルの中央にあるラジオボタンのグループを中央に揃えて反応させる方法を教えてください。

ここでは、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]&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に整列中心ように表示させるための回答以下のうちいくつかの提案を受け、しかし、また、私は概ねなさ下図に記載されている上記の方法を使用して、いくつかの落とし穴を発見しました。

ラジオラベルとクイズタイトルテキストの長さの両方回答テキストは可変であるので、これはCSSを使用して応答性の維持しながら、中央揃えにするには、この場合ではトリッキーな部分です。

出典

2016-04-08 BOBO

.radioクラス追加{テキスト整列：センター;}、 –

いくつかのCSSを追加

.radio{display:inline-block;}

col-xs-12

出典

2016-04-08 05:33:34

あなたはこのhttps://jsfiddle.net/a6j7p0et/2/ を意味していますが、それは全ての要素が中央に整列作ら私はラジオボタンのグループコンテナを中心に整列させ、テキストを左揃えにしたいと考えています。またはそれをより明確に説明しますか？ – BOBO

はいこの方法のdivクラス=フォームグループへのクラス=中心ブロックを追加した後 – smraj

text-centerでは、あなたがクラス "COL-XS-12" を「COL-XSを変更しようとしたことがありにクラスラジオ親のdivを追加します。 -8 col-xs-offset-4 "を中心にしていますか？

出典

2016-04-08 06:22:49 Steve

https://jsfiddle.net/a6j7p0et/6/ "col-sm-7"＆add class "を使用して上記の提案を見てください。 col-sm-offset-5 "クラスの設定では、col-xs-offset- *メソッドは異なる長さのテキストに適合するようには十分ではないようです。 – BOBO

これは、すべてのラジオボタン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>

以下は動作のスニペットです。チェックしてください。

<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]&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> 
 
     <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>

出典

2016-04-08 09:17:25

クイズのタイトルの中央にあるラジオボタンのグループを中央に揃えて反応させる方法を教えてください。

答えて

関連する問題