集裝箱不適用於較大的屏幕contatiner流體

我有一個容器流體與col-lg-2左側的菜單選項和col-lg-10的內容部分。集裝箱不適用於較大的屏幕contatiner流體

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> 
 
<div class="container-fluid> 
 
    <div class="row"> 
 
     <div class="col-lg-2"> 
 
      <ul> 
 
       <li>one</li> 
 
       <li>two</li> 
 
      </ul> 
 
     </div> 
 
     <div class="col-lg-10> 
 
      <div class="container"> 
 
       <div class="row"> 
 
        <div class="col-sm-6"> 
 
         <div class="form-group"> 
 
          <label for="exampleInputEmail1">Email address</label> 
 
          <input type="email" class="form-control" id="exampleInputEmail1" placeholder="Email"> 
 
         </div> 
 
        </div> 
 
        <div class="col-sm-6"> 
 
         <div class="form-group"> 
 
          <label for="exampleInputPassword1">Password</label> 
 
          <input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password"> 
 
         </div> 
 
        </div> 
 
       </div> 
 
      </div> 
 
     </div> 
 
    </div> 
 
    </div>

這工作適合中小屏幕，但大屏幕即最小寬度不起作用：1200像素。在中小屏幕上，col-lg-2和col-lg-10是上下兩行。但對於更大的屏幕，這是兩列，寬度超出屏幕。

任何幫助表示讚賞。謝謝

來源

2016-11-11 surazzarus

你可以爲這些元素添加CSS嗎？聽起來像他們可能有一個最大寬度與浮動：左。 – Gezzasa

它的所有操作引導程序的CSS @Gezzasa –

你應該能夠編輯CSS。您提供的信息（除非我不完全瞭解您所問的內容）太少，無法提供幫助。 – Gezzasa

關閉你的課程。 container-fluid和'col-lg-10'未關閉。

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> 
 
<div class="container-fluid"> 
 
    <div class="row"> 
 
    <div class="col-lg-2"> 
 

 
    </div> 
 
    <div class="col-lg-10"> 
 
      <div class="container"> 
 
       <div class="row"> 
 
        <div class="col-sm-6"> 
 
         <div class="form-group"> 
 
          <label for="exampleInputEmail1 ">Email address</label> 
 
          <input type="email" class="form-control" id="exampleInputEmail1" placeholder="Email"> 
 
         </div> 
 
        </div> 
 
        <div class="col-sm-6 "> 
 
         <div class="form-group "> 
 
          <label for="exampleInputPassword1 ">Password</label> 
 
          <input type="password " class="form-control " id="exampleInputPassword1 " placeholder="Password "> 
 
         </div> 
 
        </div> 
 
       </div> 
 
      </div> 
 
     </div> 
 
    </div> 
 
    </div>

來源

2016-11-11 09:49:24 GvM

它是封閉的..它不只是結構正確...我只是想知道是否嵌套容器內的容器工作正常或不...實際上，我正在工作clojure和寫這個HTML只是爲了得到一些概念，如果它的工作或不... ...謝謝 – surazzarus

它你嵌套行withing行的方式。在大於lg的設備上，兩列col-lg-2 & col-lg-10將位於同一行上，兩個列都可以佔用足夠的寬度。但對於較小的尺寸，一行將用於col-lg-2，而另一行則用於col-lg-10。所以更好地關閉col-lg-2的第一行，並使用另一行保存下一個col-lg-10以保持每臺設備的一致性。

<div class="container-fluid"> 
    <div class="row"> 
     <div class="col-lg-2"> 
      <ul> 
       <li>one</li> 
       <li>two</li> 
      </ul> 
     </div> 
    </div> 
    <div class="row"> 
     <div class="col-lg-10"> 
        <div class="col-sm-6"> 
         <div class="form-group"> 
          <label for="exampleInputEmail1">Email address</label> 
          <input type="email" class="form-control" id="exampleInputEmail1" placeholder="Email"> 
         </div> 
        </div> 
        <div class="col-sm-6"> 
         <div class="form-group"> 
          <label for="exampleInputPassword1">Password</label> 
          <input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password"> 
         </div> 
        </div> 
     </div> 
    </div> 
    </div>

來源

2016-11-11 11:31:17 mkawa

集裝箱不適用於較大的屏幕contatiner流體

回答

相關問題