Question

我正在尝试在我的proyect中正确实现Bootstrap，但我卡住了。我想要做的是为我的应用程序设置不同的布局，以防小型设备访问它。

我创建了一个Plunkr来简化它。我想要做的是将红色div放在灰色和橙色之间。

编辑我尝试使用business-header和login div创建一行，我可以看到我想要的小型设备的结果，但不是大型的。

这里有两张图片，第一张是我希望它在大型设备中的样子，第二张是小型的。

大型设备布局：

小型设备布局：

<header class="business-header">
        <div class="container-fluid">
            <div class="row">
                <div class="col-lg-9 col-sm-9">
                    <h1><a class="tagline hipervinculo green" ui-sref="home" translate>titulo.alergenos</a></h1>
                </div>

                <div class="login col-lg-3 col-sm-3" ng-controller="LoginController">
                    <div class="panelLogin">
                          <label for="usuario" translate>input.usuario</label>
                          <input type="text" class="form-control" id="usuario" ng-model="loginUsuario">
                          <label for="contrasena" translate>input.contrasena</label>
                          <input type="password" class="form-control" id="contrasena" ng-model="loginPassword">
                          <button type="button" class="btn btn-default" ng-click="login()" translate>input.autenticar</button>
                    </div>
                </div>
            </div>
        </div>
    </header>


<div class="container orange">
            <legend translate>Welcome</legend>

        <div class="row">
            <div class="col-sm-12">
                <ul>
                    <li ng-repeat="descripcion in texto">{{descripcion}}</li>
                </ul>
            </div>
        </div>

        <hr>

        <div class="row">
            <div class="col-sm-12">
                <h2 translate>home.titulo.queHacemos</h2>
                <p translate>home.descripcion.queHacemos</p>
                <p>
                    <a class="btn btn-default btn-lg" href="#">Call to Action &raquo;</a>
                </p>
            </div>
        </div>
        <hr>
</div>

提前感谢。

Answer 1

试试这个plunk

以下是相关位：

            <div class="login col-lg-3 col-sm-3 hidden-xs" ng-controller="LoginController">
                <div class="panelLogin">
                      <label for="usuario" translate>input.usuario</label>
                      <input type="text" class="form-control" id="usuario" ng-model="loginUsuario">
                      <label for="contrasena" translate>input.contrasena</label>
                      <input type="password" class="form-control" id="contrasena" ng-model="loginPassword">
                      <button type="button" class="btn btn-default" ng-click="login()" translate>input.autenticar</button>
                </div>
            </div>
        </div>
    </div>
</header>

            <div class="login col-xs-12 hidden-sm hidden-md hidden-lg" ng-controller="LoginController">
                <div class="panelLogin">
                      <label for="usuario" translate>input.usuario</label>
                      <input type="text" class="form-control" id="usuario" ng-model="loginUsuario">
                      <label for="contrasena" translate>input.contrasena</label>
                      <input type="password" class="form-control" id="contrasena" ng-model="loginPassword">
                      <button type="button" class="btn btn-default" ng-click="login()" translate>input.autenticar</button>
                </div>
            </div>

我复制了表单，因此它既可以进出灰色包装。然后使用bootstrap的show / hide类我隐藏了一个用于小屏幕“hidden-xs”并隐藏另一个用于更大的屏幕“hidden-sm hidden-md hidden-lg”。

小型设备的Bootstrap布局

1 个答案: