Question

这是我的HTML代码。正如您所看到的，我使用的是bootstrap类。我无法使问题文本区域与选择textarea处于同一对齐状态。有什么帮助吗？

<div class='form-group'>
       <label class = 'col-sm-2 control-label' for = 'qn_text_1'>Question 1: </label>
       <div class = 'col-sm-8'>
           <textarea readonly class = 'form-control' id= 'qn_text_1' rows="3">Textarea for question 1</textarea>
       </div>
    </div>
    <div class = 'form-group'>
        <label class="col-sm-12 control-label" for = "answerChoices_1"> Choose the correct answer(s) from the options below:
        </label>
        <div class = "row">
            <div class="col-sm-offset-2">
                <ul class = "col-sm-8" style = "list-style-type: none" id = "answerChoices_1">
                    <li>
                        <textarea class = "form-control" id = "answer_0_1" readonly>Choice 1</textarea>
                    </li>
                    <li>
                        <textarea class = "form-control" id = "answer_0_2" readonly>Choice 2</textarea>
                    </li>                       
                </ul>
            </div>
        </div>
    </div>

我尝试对课程进行一些修改，但没有运气。任何帮助解决这个问题都会有所帮助。

由于 SAMT

Answer 1

区别在于“选择”textareas包含在具有“行”类的div中，而“问题”textarea则不包含在内。引导程序中的行类具有-15px的左边距，这导致未对齐。

Answer 2

缩进的原因是你的ul和li标签。您有2个选项可以解决此问题：

1）删除ul和li标签，如下例所示:(有很多方法可以做到这一点）我列出了一个： https://jsfiddle.net/nepaw00c/2/

<div class='form-group'>
   <label class = 'col-sm-2 control-label' for = 'qn_text_1'>Question 1: </label>
   <div class = 'col-sm-8'>
       <textarea readonly class = 'form-control' id= 'qn_text_1' rows="3">Textarea for question 1</textarea>
   </div>
</div>
<div class = 'form-group'>
    <label class="col-sm-12 control-label" for = "answerChoices_1"> Choose the correct answer(s) from the options below:
    </label>
        <div class = "col-sm-8" style = "list-style-type: none" id = "answerChoices_1">
              <div>
               <textarea class = "form-control" id = "answer_0_1" readonly>Choice 1</textarea>
              </div>
              <div>
                  <textarea class = "form-control" id = "answer_0_2" readonly>Choice 2</textarea>                 
              </div>
        </div>
    </div>

2）更改ul和li的css以设置边距和填充。

Bootstrap缩进问题

2 个答案: