1. 首頁
  2. 問答
  3. 引導兩個欄佈局 - 對齊與文本區域

引導兩個欄佈局 - 對齊與文本區域

2015-08-14 63 views
1

原諒我嵌套列字段，我是比較新的自舉3引導兩個欄佈局 - 對齊與文本區域

什麼是實現使用引導3的網格24 CSS所提出的佈局的最佳方式？特別是，文本區域（項目描述）和右邊的嵌套列中的字段（原因代碼，優先級和類別）被證明是一個挑戰。我不認爲我很理解列和字段寬度是如何在網格中繼承的。

查看BootPly舉一個例子，儘可能地對齊原因代碼，優先級和類字段，這顯然需要一點調整。

enter image description here

來源

2015-08-14 TimeBomb006

+0

你好@TimeBomb，我是在你想達到什麼樣的有點混亂。也許發佈在http://www.bootply.com/new？ –

+0

@MichaelJones對不起。我修改了我的問題幷包含了BootPly鏈接。基本上，目標是讓項目描述文本區域與右側的三個字段對齊，同時還使原因代碼，優先級和類別標籤和輸入正確對齊。我過度複雜嗎？ – TimeBomb006

+0

對不起@TimeBomb，我沒有時間回覆。看起來你已經得到了很多有用的答案！ :)如果你想要另一個答案，還有一些更多的幫助，隨時問，我會自己發佈一個。這樣我可以最好地回答你可能有的所有問題。 –

回答

1

根據該快照，首先你要行>山坳分爲3

<div class="container-fluid"> 
    <div class="row"> 
     <div class="col-md-4"> 
      //Here comes Input 
      //Here comes Input 
      //Here comes Textarea 
     </div> 
     <div class="col-md-4"> 
      //Here comes Select 
      //Here comes Select 
      //Here comes Select 
      //Here comes Select 
     </div> 
     <div class="col-md-4"> 
      //Here comes Picture 
     </div> 
    </div> 
</div>

在每一個山坳，你可以這樣做，以對齊輸入的正面標籤，選擇或文本區域（內聯樣式）

<div class="row"> 
    <div class="col-md-6"> 
     <label for="ctl00_CP1_ProjectDetail_txtProjectName" id="ctl00_CP1_ProjectDetail_lblProjectName" class="control-label">Project Name</label> 
    </div> 
    <div class="col-md-6"> 
     <div class="form-group"> 
      <input type="text" id="ctl00_CP1_ProjectDetail_txtProjectName" class="form-control"> 
     </div> 
    </div> 
</div>

現在您的代碼存在問題;

  1. 你不需要寫自己的CSS form-control-inline，你可以簡單地劃分的cols像在第2的代碼實現，你是綁實現與form-control-inline和THN你也不需要這個col-md-4在<label>類
  2. 你不需要style="height:65px;"文本區域這樣的，只是設置的行數，它會調整高度本身就像<textarea class="form-control" rows="10"></textarea>

來源

2015-08-14 19:32:17 Shehary

+0

太好了，謝謝！我會根據你的建議重新編寫它。 – TimeBomb006

0

這裏是你的問題的快速解決方案。 jsfiddle

<div class="container-fluid"> 
    <div class="col-md-10 col-xs-12"> 
     <div class="row"> 
      <div class="col-md-12"> 
       <label class="col-md-3 col-xs-6" for="ctl00_CP1_ProjectDetail_txtProjectName" id="ctl00_CP1_ProjectDetail_lblProjectName">Project Name</label> 
       <input type="text" class="form-control-inline col-md-3 col-xs-6"> 
       <label class="col-md-3 col-xs-6" for="ctl00_CP1_ProjectDetail_ddlActivityType" id="ctl00_CP1_ProjectDetail_lblActivityType">Activity Type</label> 
       <select name="ctl00$CP1$ProjectDetail$ddlActivityType" id="ctl00_CP1_ProjectDetail_ddlActivityType" class="form-control-inline col-md-3 col-xs-6"></select> 
      </div> 
     </div> 
     <div class="row"> 
      <div class="col-md-12"> 
       <label class="col-md-3 col-xs-6" for="ctl00_CP1_ProjectDetail_txtProjectName" id="ctl00_CP1_ProjectDetail_lblProjectName">Project Launch</label> 
       <input type="text" class="form-control-inline col-md-3 col-xs-6"> 
       <label class="col-md-3 col-xs-6" for="ctl00_CP1_ProjectDetail_ddlActivityType" id="ctl00_CP1_ProjectDetail_lblActivityType">Status</label> 
       <select name="ctl00$CP1$ProjectDetail$ddlActivityType" id="ctl00_CP1_ProjectDetail_ddlActivityType" class="form-control-inline col-md-3 col-xs-6"></select> 
      </div> 
     </div> 
     <div class="row"> 
      <div class="col-md-12"> 
       <div class="col-md-6"> 
        <label class="control-label col-md-6 col-xs-12">Project Description</label> 
        <textarea class="form-control-inline col-md-6 col-xs-12" style="height:75px;"></textarea> 
       </div> 
       <div class="col-md-6"> 
        <div class="col-xs-12"> 
          <label class="control-label col-md-6 col-xs-6">Reason Code</label> 
          <select name="ctl00$CP1$ProjectDetail$ddlActivityType" id="ctl00_CP1_ProjectDetail_ddlActivityType" class="form-control-inline col-md-6 col-xs-6"></select> 
        </div> 
        <div class="col-xs-12"> 
          <label class="control-label col-md-6 col-xs-6">Priority</label> 
          <select name="ctl00$CP1$ProjectDetail$ddlActivityType" id="ctl00_CP1_ProjectDetail_ddlActivityType" class="form-control-inline col-md-6 col-xs-6"></select> 
        </div> 
        <div class="col-xs-12"> 
          <label class="control-label col-md-6 col-xs-6">Class</label> 
          <select name="ctl00$CP1$ProjectDetail$ddlActivityType" id="ctl00_CP1_ProjectDetail_ddlActivityType" class="form-control-inline col-md-6 col-xs-6"></select> 
        </div> 
       </div> 
      </div>  
     </div>  
    </div> 
    <div class="col-md-2 col-xs-12"> 
     <div class="well">Test image here 
      <br> 
      <br> 
      <br> 
      <br> 
      <br> 
     </div> 
    </div> 
</div>

P.S.我只爲列添加了引導類。

來源

2015-08-14 20:33:19

0

我在代碼中做了一些更正，以達到您提交的草稿的目標，但基本的Bootstrap基本上已經提供了。

我意識到你沒有掌握柵格是爲了得到完美的對齊方式，列並排必須添加24的最終值，例如：al-lg-10旁邊的al-lg-14 。如果您使用lg變體，md和xs sm，則可以控制佈局在各種屏幕分辨率下的行爲。

HTML

 <div class="container-fluid"> 
     <div class="row"> 
     <div class="col-lg-18 col-md-18 col-xs-24"> 
      <div class="col-lg-12 col-md-12 col-xs-24"> 
      <div class="row space-form"> 
       <label for="ctl00_CP1_ProjectDetail_txtProjectName" id="ctl00_CP1_ProjectDetail_lblProjectName" class="control-label col-md-10">Project Name</label> 
       <div class="col-md-14"> 
       <input type="text" id="ctl00_CP1_ProjectDetail_txtProjectName" class="form-control-inline form-left"> 
       </div> 
      </div> 
      <div class="row space-form"> 
       <label for="ctl00_CP1_ProjectDetail_txtProjectLaunchName" id="ctl00_CP1_ProjectDetail_lblProjectLaunchName" class="control-label col-md-10">Project Launch Name</label> 
       <div class="col-md-14"> 
       <input name="ctl00$CP1$ProjectDetail$txtProjectLaunchName" type="text" id="ctl00_CP1_ProjectDetail_txtProjectLaunchName" class="form-control-inline form-left"> 
       </div> 
      </div> 
      <div class="row space-form"> 
       <label class="control-label col-md-10">Project Description</label> 
       <div class="col-md-14"> 
       <textarea class="form-control-inline form-left" style="height:65px;"></textarea> 
       </div> 
      </div> 
      </div> 
      <div class="col-lg-12 col-md-12 col-xs-24"> 
      <div class="row space-form"> 
       <label for="ctl00_CP1_ProjectDetail_ddlActivityType" id="ctl00_CP1_ProjectDetail_lblActivityType" class="control-label col-md-8">Activity Type</label> 
       <div class="col-md-16"> 
       <select name="ctl00$CP1$ProjectDetail$ddlActivityType" id="ctl00_CP1_ProjectDetail_ddlActivityType" disabled="disabled" class="form-control-inline"> 
       </select> 
       </div> 
      </div> 
      <div class="row space-form"> 
       <label for="ctl00_CP1_ProjectDetail_ddlStatus" id="ctl00_CP1_ProjectDetail_lblStatus" class="control-label col-md-8">Status</label> 
       <div class="col-md-16"> 
       <select name="ctl00$CP1$ProjectDetail$ddlStatus" id="ctl00_CP1_ProjectDetail_ddlStatus" class="form-control-inline validationpurple"> 
       </select> 
       </div> 
      </div> 
      <div class="row space-form"> 
       <label class="control-label col-md-8">Reason Code</label> 
       <div class="col-md-16"> 
       <input type="text" class="form-control-inline"> 
       </div> 
      </div> 
      <div class="row space-form"> 
       <label class="control-label col-md-8">Priority</label> 
       <div class="col-md-16"> 
       <input type="text" class="form-control-inline"> 
       </div> 
      </div> 
      <div class="row space-form"> 
       <label class="control-label col-md-8">Class</label> 
       <div class="col-md-16"> 
       <input type="text" class="form-control-inline"> 
       </div> 
      </div> 
      </div> 
     </div> 
     <div class="col-lg-6 col-md-6 col-xs-24 "> 
      <div class="well space-form" style="height: 100%">Test image here <br> 
      <br> 
      <br> 
      <br> 
      <br> 
      </div> 
     </div> 
     </div> 
    </div>

CSS

 .space-form { 
     margin-top: 10px; 
     margin-bottom: 10px; 
    } 
    .control-label { 
     text-align: left; 
    } 
    .form-control-inline { 
     width: 100% 
    } 
    @media (max-width:991px) { 
    .form-left { 
     width: 100% 
    } 
    } 
    @media (min-width:990px) { 
    .form-left { 
     width: 90% 
    } 
    }

來源

2015-08-14 21:00:16

相關問題

 相關問題