Bootstrap面板看起來不正確

-1

我現在在玩Bootstrap並試圖理解這一切。我想下面創建此影像並進行調節等Bootstrap面板看起來不正確

到目前爲止，我有這個，但你可以看到它看起來不正確的：我試圖使圖像更大，因爲我想要一個更大的大小，但它擰緊了一切。這裏是我的代碼：

HTML：

<div class="container"> 
    <div class="Mainbody3"> 
    <div class="pancontrol"> 
     <div class="panel panel-default"> 
     <div class="panel-heading">Panel Title</div> 
     <div class="panel-body"> 
      <div class="row"> 
      <div class="col-lg-4 col-md-3 col-sm-4 col-xs-3"> 
       <div class="panel panel-default"> 
       <div class="panel-body"><img src="https://juicerecipes.com/media/cache/7b/c1/7bc189caa0876b4793f6a0ddfd32dae8.jpg" alt="" class="img-responsive" /> 
       </div> 
       </div> 
       <div class="panel panel-default"> 
       <p> 
        Button 
       </p> 
       </div> 
      </div> 
      <div class="col-lg-10 col-md-9 col-sm-8 col-xs-6"> 
       <h4 align="center"> 
       List Title 
       </h4> 
       <ul class="list-group"> 
       <li class="list-group-item">Item One</li> 
       <li class="list-group-item">Item Two</li> 
       <li class="list-group-item">Item Two</li> 
       <li class="list-group-item">Item Two</li> 
       <li class="list-group-item">Item Two</li> 
       </ul> 
      </div> 
      <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12"> 
      </div> 
      </div> 
     </div> 
     <div class="panel-footer"> 
      Here comes some text 
     </div> 
     </div> 
    </div> 
    </div> 
</div>

CSS：

pancontrol{ 
    border: 1px solid rgba(0, 0, 0, 0.65); 
    height: 183px; 
    width: 800px; 
    margin: auto; 
    margin-top: 10px; 
} 

.list-group{ 
    width: 170px; 
    margin: auto; 
}

當你伸展窗口出來的jsfiddle你可以看到將圖像放大，但文字只是去底部。

來源

2016-02-23 Nevershow2016

你爲什麼不給的鏈接小提琴，使我們可以圍繞它太玩？ :) –

http://jsfiddle.net/d1wu4ojm/12/這裏是小提琴，就像我說的我只是想看看我是否以正確的方式建立它，如果我可以使圖像像500 500並保持它的一切方式 – Nevershow2016

此外，我正在嘗試使整個面板更小，就像整個面板的寬度400 px; – Nevershow2016

您的兩個主要列分別有col-lg-10和col-lg-4，它們會溢出佈局，因爲它們合計爲14，可用列的最大數量爲12.同樣，col-xs- 3和col-xs-6只加起來爲9，所以你可以也可能應該碰到一個或兩個，所以他們也等於12。

前：

<div class="col-lg-10 col-md-9 col-sm-8 col-xs-6"> 
<div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">

和後：

<div class="col-lg-4 col-md-5 col-xs-6"> 
<div class="col-lg-8 col-md-7 col-xs-6">

我不知道你到底怎麼想的佈局看，這樣的代碼之後就是一個例子。請記住，您無需爲每種尺寸明確設置列的寬度。如果你離開了col-sm-[num]，例如，它將繼承col-xs-[num]

https://jsfiddle.net/dwrx7fpo/

編輯的屬性：

眼看例如網站，你給我看，我做了一對夫婦的調整。

<div class="col-lg-4 col-md-5 col-xs-12"> 
<div class="col-lg-8 col-md-7 col-xs-12">

同時設置COL-XS類COL-XS-12將導致他們在移動或「XS」視圖疊加。我還從.pancontrol選擇器中刪除了width: 800px;，因爲它拋棄了佈局。

https://jsfiddle.net/dwrx7fpo/2/

來源

2016-02-23 03:45:25 symlink

我實際上在這個網站上找到了一個很好的例子：https：//juicerecipes.com/recipes/你可以看到面板如何看起來這個是我試圖去 – Nevershow2016

Bu ton那裏的網站，我很喜歡那裏cols去24，我不知道這是如何有意義 – Nevershow2016

看到我的編輯。您可以指定http：// getbootstrap上的列總數。com /在下載CSS之前。 – symlink

Bootstrap面板看起來不正確

回答

相關問題