Question

我有一个div，它是“col-xs-8 col-xs-offset 2”，它将一个表格置于屏幕中间。在这个表格中，我有两个文本区域和4个单选按钮，每个按钮都有相应的文本输入。我的问题是，当文本区域跨越容器的宽度并在调整窗口大小时适当调整大小时，单选按钮旁边的输入保持相同的大小，直到浏览器调整大小低于其原始长度，此时它们调整较小。我希望这些单选按钮文本输入以与文本区域相同的方式跨越。

我希望这很清楚。

<link rel="stylesheet" href="style.css">

<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">

<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>

<body class="container-fluid">

    <div class="row">

        <ol class="breadcrumb">
            <li><a href="#"><span class="glyphicon glyphicon-home"</span></a></li>
                <li><a href="#">Create Quiz</a></li>
            </ol>

        <form method ="POST">
            <div class="col-xs-8 col-xs-offset-2">
                <fieldset class="form-group"> 
                    <legend class="text-center">
                        <label for="quiz_title" >Quiz Title:

                        </label>
                    </legend>

                    <div class="form-group">
                        <label for="question_text">Question</label>
                        <textarea class="form-control" id="explanation_text" rows="2"></textarea>
                    </div>

                    <div class="form-check">    
                        <input type="radio" class="form-check-input" name="answer" id="option1" value="radio_option1" required="required">
                        <label for="option1" class="form-check-label"> Answers: <a><span class="glyphicon glyphicon-pencil"></span></a>
                            <input class="form-control" type="text" id="option1" required="required">
                        </label>
                    </div>

                    <div class="form-check">    
                        <input type="radio" class="form-check-input" name="answer" id="option2" value="radio_option2" >
                        <label for="option2" class="form-check-label">
                            <input class="form-control" type="text" id="option2" required="required">
                        </label>
                    </div>

                    <div class="form-check">    
                        <input type="radio" class="form-check-input" name="answer" id="option3" value="radio_option3">
                        <label for="option3" class="form-check-label">
                            <input class="form-control" type="text" id="option3" required="required">
                        </label>
                    </div>

                    <div class="form-check">    
                        <input type="radio" class="form-check-input" name="answer" id="option4" value="radio_option4">
                        <label for="option4" class="form-check-label">
                            <input class="form-control" type="text" maxlength="5" id="option4" required="required">
                        </label>
                    </div>

                    <div class="form-group">
                        <label for="explanation_text">Explanation</label>
                        <textarea class="form-control" id="explanation_text" rows="2" placeholder="Optional..."></textarea>
                    </div>

                </fieldset>         
            </div>

            <div class="row">
                <div class="col-xs-12">
                    <div class="col-xs-6">
                        <button type="submit" class="btn btn-primary center-block pull-right" name="question_submit"> Save Question </button>
                    </div>
                    <div class="col-xs-6">
                        <button type="submit" class="btn btn-primary center-block pull-left" name="quiz_submit"> Save Quiz </button>
                    </div>
                </div>
            </div>

        </form>
    </div>

</body>

调整流程：

Answer 1

Bootstrap有一些你可能想要尝试的“输入组”。您可以将单选按钮放在输入组中的文本输入旁边，文本输入将填充剩余空间。请看一些示例：https://getbootstrap.com/components/#input-groups-checkboxes-radios

这是我使用你的代码放在一起的东西。单击“运行代码段”，然后单击“整页”以全页模式查看它。然后你可以调整窗口的大小，看它是如何缩放的。

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
    <div class="container-fluid">
    <div class="row">

        <ol class="breadcrumb">
            <li><a href="#"><span class="glyphicon glyphicon-home"</span></a></li>
            <li><a href="#">Create Quiz</a></li>
        </ol>

        <form method ="POST">
            <div class="col-xs-8 col-xs-offset-2">
                <fieldset class="form-group"> 
                    <legend class="text-center">
                        <label for="quiz_title">Quiz Title:</label>
                    </legend>

                    <div class="form-group">
                        <label for="question_text">Question</label>
                        <textarea class="form-control" id="explanation_text" rows="2"></textarea>
                    </div>
                    
                    <label for="option1">Answers: <a><span class="glyphicon glyphicon-pencil"></span></a></label>
                    
                    <div class="input-group" style="margin-bottom:10px;">
                        <span class="input-group-addon">
                            <input type="radio" name="answer" id="option1" value="radio_option1" required="required">
                        </span>
                        <input type="text" class="form-control" id="option1" required="required">
                    </div>
                    
                    <div class="input-group" style="margin-bottom:10px;">
                        <span class="input-group-addon">
                            <input type="radio" name="answer" id="option2" value="radio_option2" required="required">
                        </span>
                        <input type="text" class="form-control" id="option2" required="required">
                    </div>
                    
                    <div class="input-group" style="margin-bottom:10px;">
                        <span class="input-group-addon">
                            <input type="radio" name="answer" id="option3" value="radio_option3" required="required">
                        </span>
                        <input type="text" class="form-control" id="option3" required="required">
                    </div>
                    
                    <div class="input-group" style="margin-bottom:10px;">
                        <span class="input-group-addon">
                            <input type="radio" name="answer" id="option4" value="radio_option4" required="required">
                        </span>
                        <input type="text" class="form-control" id="option4" required="required">
                    </div>

                    <div class="form-group">
                        <label for="explanation_text">Explanation</label>
                        <textarea class="form-control" id="explanation_text" rows="2" placeholder="Optional..."></textarea>
                    </div>

                </fieldset>         
            </div>

            <div class="row">
                <div class="col-xs-12">
                    <div class="col-xs-6">
                        <button type="submit" class="btn btn-primary center-block pull-right" name="question_submit"> Save Question </button>
                    </div>
                    <div class="col-xs-6">
                        <button type="submit" class="btn btn-primary center-block pull-left" name="quiz_submit"> Save Quiz </button>
                    </div>
                </div>
            </div>

        </form>
    </div>
    </div>

调整单选按钮（表单检查）div

1 个答案: