Question

我对bootstrap网格系统有一个小问题，我有一行有网格设置，有两个部分使用col-md-6，现在问题是我缩放浏览器超过100％我的关闭标签和输入正在转移到下一行。我希望它们一直保持相同的位置缩放不应该影响行的位置。我试图使用col-xs-1但它不起作用。如何使用bootstrap实现该任务？

main.html中

<div class="row">
                <div class="container col-md-6">
                    <div class="form-group">
                        <label class="col-md-5">Actual Cycle Start:</label>
                        <div class="col-md-7">
                            <div class="row">
                                <div class="col-xs-5">
                                    <input class="form-control" ng-model="riskAssessmentDTO.cycleStartDate"
                                         k-format="'MM/dd/yyyy'" disabled />
                                </div>
                                <div class="col-xs-1">
                                    <label class="control-label"> Close:</label>
                                </div>
                                <div class="col-md-5 changeWdh">
                                    <input class="form-control" ng-model="riskAssessmentDTO.cycleEndDate" k-format="'MM/dd/yyyy'" disabled />
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="form-group col-md-6 fieldHeight">
                    <label for="challengeOutstand" class="col-md-5">Challenges
                        Outstanding:</label>
                    <div class="col-md-7">
                        <input type="text" class="form-control" id="challengeOutstand"
                            name="challengeOutstand" maxlength="256"
                            ng-model="riskAssessmentDTO.challengesOutstanding" disabled />
                    </div>
                </div>

            </div>

的main.css

.changeWdh{  
    width: 152px;
}

Answer 1

编辑：试试这个：

<div class="container">
    <div class="row">
        <div class="col-6-md">
            <div class="col-md-7">
                <div class="row">
                    <div class="col-xs-1">
                        <label class="col-md-5">Actual Cycle Start:</label>
                    </div>
                    <div class="col-xs-5">
                        <input class="form-control" ng-model="riskAssessmentDTO.cycleStartDate"
                                     k-format="'MM/dd/yyyy'" disabled />
                    </div>
                </div>
                <div class="row">
                    <div class="col-xs-1">
                        <label class="control-label"> Close:</label>
                    </div>
                    <div class="col-xs-5 changeWdh">
                       <input class="form-control" ng-model="riskAssessmentDTO.cycleEndDate" k-format="'MM/dd/yyyy'" disabled />
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="col-md-6 fieldHeight">
        <label for="challengeOutstand" class="col-xs-5">Challenges
                    Outstanding:</label>
        <div class="col-xs-7">
            <input type="text" class="form-control" id="challengeOutstand"
                        name="challengeOutstand" maxlength="256"
                        ng-model="riskAssessmentDTO.challengesOutstanding" disabled />
        </div>
    </div>
</div>

将col-5和col-1放入行div中或将它们都放入xs，而不是一个md和一个xs，并将它们放入div容器类“col-md-6”

使用Bootstrap将浏览器缩放100％以上时如何保持行位置相同？

1 个答案: