Question

我遇到了自举网格系统的问题。低于<div class="col-xs-12 col-md-4">的div应位于右侧，而其他div位于左侧。目前前两个列div是正确的并且渲染在顶部，但是第三列div不会渲染直到图像的底部而不是它的旁边。我需要它们正确显示，我该怎么办？

                  <div class="container">
                        <div class="row">
                            <div class="col-xs-12 col-md-7">
                                <h1>WELCOME TO YOUR NETWORK PROGRAM WEBSITE</h1>
                            </div>
                            <div class="col-xs-12 col-md-4">
                                <img src="images/tie.png">
                            </div>
                            <div class="col-xs-12 col-md-7">
                                <div class="loginText">
                                    Get information about your Connect plan 
                                    <br><br>
                                    If you have any problems logging in, please contact your account manager for help.
                                    <br><br>
                                </div>
                            </div> <!-- cols -->
                        </div> <!-- row -->
                    </div> <!-- container -->

看起来像

第三个div需要在第一个div下移动，但它当前低于第二个div的高度。

Answer 1

Bootstrap的框架基于 12列布局。

所以

$scope.registrar = function(form, datos) { $scope.submitted = true; if(form.$valid) { var toSendData = JSON.stringify({ Nombre: datos.nombre, Calle: datos.calle, Numero: datos.numero, Piso: datos.piso, Puerta: datos.puerta, CP: datos.cp, Ciudad: datos.ciudad, Email: datos.email, Necesidades: datos.necesidades, Telefono: datos.telefono }); console.log(toSendData); $http.post($rootScope.recibirNuevoUrl, toSendData).then(function(response){ $scope.hideLoading(); if(response.data.status == "ok"){ $state.go('registro'); }else{ $scope.$parent.showAlert("Error al introducir los datos", response.data.message); } }) }else{ $scope.$parent.showAlert('Validacion de datos', 'El formulario contiene errores. Por favor revise los campos marcados para comprobar los errores.'); } }; + col-md-7 + col-md-4 = 18列超过12列限制，因此将第三个div推到下一行。

您可以通过将col-md-7更改为col-md + col-md-5 + col-md-2来解决此问题：

col-md-5

Answer 2

引导网格系统总是连续添加到12。你有md-7和md-4只有11。

你需要改变

<div class="col-xs-12 col-md-4">

到

<div class="col-xs-12 col-md-5">

现在你有7 + 5 = 12。

Answer 3

你的问题不是很清楚，但根据我的理解，col-md-7 plus col-md-4 plus col-md-7等于18，比分配的12多6个。所以它会进入下一个线。

Answer 4

因此，根据您更新的问题，您需要左侧的文字和右侧的图片。你可以这样做：

<div class="row">
    <div class="col-xs-12 col-md-8">
        <div class="row">
            <div class="col-xs-12">
                <h1>WELCOME TO YOUR NETWORK PROGRAM WEBSITE</h1>
            </div>
            <!-- div below is hidden in xs -->
            <div class="col-md-12 hidden-xs">
                <div class="loginText">Get information about your Connect plan<br><br>If you have any problems logging in, please contact your account manager for help.<br><br>
                </div>
            </div>
        </div>
    </div>
    <div class="col-xs-12 col-md-4">
        <img src="images/tie.png">
    </div>

    <!-- div below is shown only in xs -->
    <div class="col-md-12 visible-xs">
        <div class="loginText">Get information about your Connect plan<br><br>If you have any problems logging in, please contact your account manager for help.<br><br>
        </div>
     </div>
</div>

Bootstrap网格项目不会彼此一起渲染

4 个答案: