简体   繁体   中英

Responsive wells in Twitter-Bootstrap?

Given this wrapping:

<div class="container">
    <div class="row-fluid swell">
    <div class="span9">
        hello world
    </div>
</div>
</div>

With this styling (atop twitter-bootstrap):

.swell {
    background-color: #F5F5F5;
    border: 1px solid #E3E3E3;
    border-radius: 4px 4px 4px 4px;
    box-shadow: 0 1px 1px rgba(0, 0, 0, 0.05) inset;
    margin-bottom: 20px;
    min-height: 20px;
    padding: 19px;
}

How do I get graceful responsiveness?

( Plnkr where you can see the website running; drag side of browser window to see problem)

Don't make a div both a row and a well:

<div class="row-fluid">
  <div class="swell">
    <div class="span9">
     hello world
    </div>
  </div>
</div>

Figured out the solution:

<div class="swell">
    <div class="row-fluid">
        <div class="span9">
            Hello world!
        </div>
    </div>
</div>

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM