不能增加jumbotron寬度

-1

我是web開發的新手。我在我的巨無霸中遇到的問題是，它不會增加我手機的寬度，而且我的文本會從中溢出。我想調整一下，以便jumbotron符合「人物事件」。這裏是問題圖片：這是我的Html http://pastebin.com/CgNSPLeE。不能增加jumbotron寬度

當前代碼：

@media (min-width: 414px) and (max-width: 736 px) { 
    #main { 
    width: 100%; 
    height: 100%; 

    } 
    #people-things a { 
    position: relative; 
    padding-left: 50px; 
    left: 150px; 
    }

我在做什麼錯？

來源

2015-11-06 Black User

@ j08691編輯。 –

總是創造一個問題的小提琴。爲你的情況，我已經在這裏：https://jsfiddle.net/xVB3t/ 你還沒有包括所有相關的CSS。請這樣做。 – FlyingAura

嘗試做＃人事物{font-size：50％;或者適合的百分比。以百分比形式提供字體大小使字體根據瀏覽器大小縮放。 – FlyingAura

看來你正在試圖將東西放在自己的路上。 Bootstrap是一個CSS框架，可以完整地完成任務，所以您不需要添加任何位置CSS代碼。因爲這是由Bootstrap CSS管理的。
您不需要放置該CSS。
如果您想要將文字「People-Things Recomentations」放置在jumbotron中，就可以在其中放置一個h0或h3。要實現完美的Bootstrap同步，最好使用h1，然後如果你希望它更小，可以使用CSS來改變它的大小。
Bootstrap的網格系統工作在12列，但在jumbotron的情況下，它們以另一種方式工作。這是HTML你將需要：

<div class="jumbotron" id="main"> 
<div class="container-fluid"> 
    <h1><a href="#">People-Things Recomendation</a></h1> 
</div> 
</div>

要改變項目的顏色等，你可以以這種方式使用CSS：
例如你想改變的顏色「以人事物Recomendation」：

div#main h1 { 
color: blue; 
}

我希望這是你的意思;如果不是，請告訴我。乾杯！

來源

2015-11-06 15:01:34 Optiroot

這並不重要，問題仍然存在。 –

您是否在標籤中包含任何其他CSS文件？因爲這應該是最簡單的方法。這就像[Bootstrap]（http://getbootstrap.com/components/#jumbotron）所說的那樣。您可以粘貼您的完整HTML嗎？ – Optiroot

這裏是我的rest css代碼#main { position：relative; bottom：90px; 寬度：自動; } –

你的.jumbotron應該有一個.container和網格div .col-md-12然後它會適應其父容器。

<div class="container"> 
    <div class="row"> 
     <div class="col-md-4"> 
      <div class="jumbotron"> 
       <div class="container"> 
        <div class="col-md-7"> 
         <h3 id="people-things"><a href="#">PEOPLE-THINGS RECOMENDATION</a></h3> 
        </div> 
        <div class="col-md-5"> <!--empty--> </div> 
       </div> 
      </div> 
     </div> 
     <div class="col-md-8"> <!--empty--> </div> 
    </div> 
</div>

然後使用引導程序的responsive classes/utilities進行遊戲，以便獲得理想的效果。

*這是一種反模式，使用引導程序並強制更多屬性的佈局。如果使用引導程序，請嘗試使用默認類實現您想要的內容。

來源

2015-11-06 15:02:43 juanmnl

添加了jsbin [示例]（http://jsbin.com/guyutu/1/edit?html,output） – juanmnl

@ juanmni這裏是我的html你能解決這個問題嗎？ –

http://pastebin.com/CgNSPLeE –

不能增加jumbotron寬度

回答

相關問題