twitter-bootstrap，問題與面板

-1

隨着引導CSS我試圖建立一個面板使用「面板」和「面板主」類。我的問題是：在面板的頭部（類面板標題）不採取寬度100％：https://jsfiddle.net/rcygfpxu/twitter-bootstrap，問題與面板

我的代碼是：

<div class="container"> 
    <div class="row"> 
     <div class="module panel panel-primary col-xs-12 col-sm-12 col-md-offset-1 col-md-9 col-lg-offset-2 col-lg-8"> 
      <div class="panel-heading">Subjet Line & Pre Header</div> 
      <div class="panel-body form-horizontal"> 
       <div class="form-group inline-form row"> 
        <label class="col-xs-4 col-sm-4 col-md-offset-1 col-md-2 col-lg-offset-1 col-lg-2 control-label" for="subjectLine">Subject Line</label> 
        <div class="col-xs-6 col-sm-6 col-md-8 col-lg-8"> 
         <input id="subjectLine" name="subjectLine" type="text" placeholder="" class="form-control input-md"> 
        </div> 
       </div> 
       <div class="form-group inline-form row"> 
        <label class="col-xs-4 col-sm-4 col-md-offset-1 col-md-2 col-lg-offset-1 col-lg-2 control-label" for="preHeader">Pre Header</label> 
        <div class="col-xs-6 col-sm-6 col-md-8 col-lg-8"> 
         <input id="preHeader" name="preHeader" type="text" placeholder="" class="form-control input-md"> 
        </div> 
       </div> 
      </div> 
     </div> 
    </div> 
</div>

來源

2015-04-01 woshitom

只是不要組合帶'col -...'的e'面板'。將'panel'換成'col -...'而不是。 – Cthulhu 2015-04-01 09:52:14

這是因爲您正在使用Bootstraps網格列，它在左側和右側添加填充。面板使用可用寬度的100％。 – Lee 2015-04-01 09:52:54

您需要刪除col-，因爲他們的襯墊會干擾您的面板。您不需要使用內部面板。 – AngularHarsh 2015-04-01 09:58:00

鴻溝面板DIV到2格 - 一個用於面板和一個用於列

https://jsfiddle.net/rcygfpxu/4/

您的版本：

<div class="module panel panel-primary col-xs-12 col-sm-12 col-md-offset-1 col-md-9 col-lg-offset-2 col-lg-8">

新版本：

<div class="col-xs-12 col-sm-12 col-md-offset-1 col-md-9 col-lg-offset-2 col-lg-8"> 
    <div class="module panel panel-primary">

來源

2015-04-01 09:56:46 roeb

-1

只是在樣式表中添加這種風格，確保你需要從你父母的ID或Class中指出這些樣式，以便它不會影響引導類。

.panel-primary { 
    padding: 0; 
}

來源

2015-04-01 09:54:39 stanze

twitter-bootstrap，問題與面板

回答

相關問題