2014-03-31 64 views
1

我使用引導程序3網格來設計具有3列的網頁。網格定義如下:如何將引導程序3模式寬度設置爲網格列

<body> 
    <div class='container-fluid'> 
     <div class="row"> 
      <div class="col-xs-1"></div> 
      <div class="col-xs-10"> 
       <form action="#"> 
        ... 
       </form> 
      </div> 
      <div class="col-xs-1"></div> 
     </div> 

表單中有一個按鈕。點擊該按鈕後,會顯示Bootstrap模式。

模態定義如下:

<div id="add_element_modal" class="modal fade"> 
    <div class="modal-content"> 
     <div class="row"> 
      <div class="col-xs-3"></div> 
      <div class="col-xs-6"> 
       <div class="modal-header"> 
        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button> 
        <h4 class="modal-title">Add Data Element</h4> 
       </div> 
       <div class="modal-body"> 
        <h4>Specify Element Type</h4> 
        <div class="radio"> 
         <label> 
          <input type="radio" name="element_type" id="et_q" value="v1" checked>Option 1 
         </label> 
        </div> 
        <div class="radio"> 
         <label> 
          <input type="radio" name="element_type" id="et_ft" value="v2">Option 2 
         </label> 
        </div> 
       </div> 
       <div class="col-xs-3"></div> 
      </div> 
     </div> 
     <div class="modal-footer"> 
      <button type="button" data-dismiss="modal" class="btn btn-default">Cancel</button> 
      <button type="button" class="btn btn-primary" id="btn_add_element">Submit</button> 
     </div> 
    </div> 
</div> 

當顯示模態,我想設置其寬度,但是失敗了。模態的寬度始終與瀏覽器寬度相同。我試圖用3列(col-xs-3col-xs-6,col-xs-3)的行來限制模態定義。看起來div add_element_modal沒有正確定義。但我無法理解。

任何人都可以幫忙嗎?

回答

相關問題