小設備的自舉佈局

-1

我試圖在我的項目中正確實現Bootstrap，但即時通訊卡。我想要做的是爲我的應用程序設置不同的佈局，以防其被小設備訪問。小設備的自舉佈局

我創建了一個Plunkr以使其更容易。我想要做的是將紅色的div放在灰色和橙色之間。

編輯我試圖創建一個與業務頭和登錄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>

在此先感謝。

來源

2016-11-07 txomin

雖然我們不期望頂級的語法，但正確的拼寫只會幫助您獲得關注。 –

恩......對不起我的英語，我正在努力。我編輯了這個問題，或許它現在好多了？ – txomin

讓一位朋友幫助你。 –

試試這個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>

我複製的形式，因此在國內外享有很高的灰色包裝的很。然後使用引導程序的顯示/隱藏類我隱藏了一個用於小屏幕的「hidden-xs」，隱藏另一個用於大屏幕「hidden-sm hidden-md hidden-lg」。

來源

2016-11-08 10:18:04 Mark

小設備的自舉佈局

回答

相關問題