responsive-design | 易学教程

Evenly spacing out elements within a div for responsive design

阅读更多关于 Evenly spacing out elements within a div for responsive design

问题 I have four elements within a div and want to space them out evenly in the available space. What technique is considered best practice for responsive design in this case? For each element, I am using: height: 75px; width: 75px; border-radius: 50%; margin-right: 20px; JS Fiddle: http://jsfiddle.net/adnanymous/9yYZJ/ 回答1: Since you're already using bootstrap, just insert a div.row-fluid inside that div that should contain the four items. Wrap each of those four items in a div.span3 . That will

Fixed margins on a responsive layout?

阅读更多关于 Fixed margins on a responsive layout?

问题 Simply put, I am working on a responsive web layout with columns and rows. Each column width is set relevant to a predefined total width: column width / total width = width % and the height is fixed. Now the problem is, I want the content width to be fluid but the margin and padding to be of fixed width as below. The code looks something like this: HTML <body> <div id="left">Left</div> <div id="middle">Middle</div> <div id="right">Right</div> </body> CSS div { float: left; padding: 0.5em; box

Bootstrap affix is always “jumping”

阅读更多关于 Bootstrap affix is always “jumping”

问题 I want to use the affix plugin of bootstrap on my sidebar. However, as my site is responsive, it's always jumping on some dimensions, and I can't get it working properly. I tried the solutions listed here: How to use the new affix plugin in twitter's bootstrap 2.1.0? but it's not just working. Here's a demo I know how I could do this on a site with fixed width, but as my site is responsive and so is bootstrap docs, and as it works perfectly there, how do I achieve the same effect? As this isn

Grunt/Bundler wont use specified sass version

阅读更多关于 Grunt/Bundler wont use specified sass version

问题 We have a project with Grunt and Bundler setup. All of these installed without issue. Gemfile.lock generated, proper gems pulled down, and grunt files created with npm. We start our watch on the project and it bombs on sass compile because it's using the wrong version of sass and not the one specified in the gemfile. This is on windows by the way... Gemfile source 'https://rubygems.org' gem 'sass', '~> 3.2' gem 'compass', '~> 0.12' gem 'susy', '~> 1.0' Gemfile.lock GEM remote: https:/

Justify Nav-pills with Bootstrap v4

阅读更多关于 Justify Nav-pills with Bootstrap v4

问题 I want to justify my navigation bar across the width of the div. The trouble is that I use Bootstrap v4 and the nav-justify class is not yet available. Here is the code: <ul class="nav nav-pills"> <li class="nav-item"> <a class="nav-link active" href="#subscribed" data-toggle="tab">Mes inscriptions</a> </li> <li class="nav-item"> <a class="nav-link" href="#eventPassed" data-toggle="tab">Événements passés</a> </li> <li class="nav-item"> <a class="nav-link" href="#eventNow" data-toggle="tab"

Justify Nav-pills with Bootstrap v4

阅读更多关于 Justify Nav-pills with Bootstrap v4

Can I use a media query in internal CSS, and will it avoid loading the background images I define?

阅读更多关于 Can I use a media query in internal CSS, and will it avoid loading the background images I define?

问题 I'm working on a responsive site where each page will have a large hero image, defined in the CMS. I'd like to avoid having to download that background image on mobiles. The only way I can think to do it is to have some inline CSS in the head of the page like so: <style type="text/css"> @media only screen and (min-width: 680px) { .hero-image { background-image: url(../images/image.jpg); } } </style> First, can I use media queries in inline CSS? Second, will this avoid downloading the image on

off canvas menu gets cut off on pages that have very little content

阅读更多关于 off canvas menu gets cut off on pages that have very little content

问题 I am trying to implement an off canvas menu. I found the example on Smashing magazine and had implemented the menu---it works great except for pages that only have a small amount of content; the items in the slide out menu only appear as far down as the content goes. Event the example on Smashing Magazine doesn't work properly if you have a short amount of content and a lot of menu items. I have posted a comment over on the Smashing Magazine post but haven't heard back. Here's my jsfiddle If

How do I make an html image responsive?

阅读更多关于 How do I make an html image responsive?

问题 I have an html image. Its my logo and then in the top right corner is a link for social media. I have got the image in place but when I re-size my screen its not responsive like everything else is. This is what I have; <div id="headerhj" align="center"> <table style="display: inline-table;" border="0" cellpadding="0" cellspacing="0" max-width="100%">  <tr> <td

How to scroll to anchor point in responsive website?

阅读更多关于 How to scroll to anchor point in responsive website?

问题 I'm making a portfolio website that contains a simple dropdownlist and one big GIF image in a div (10659px × 6850px). As I intended, when you make selections from the list, you jump to certain anchor points on the page using a simple javascript that's being activated onChange. The html: <div id="background"> <img src="img/background.gif" width="10659" /></div> <select id="dropdownlist" onChange="jumpScroll(this.value);"> <option alt="selected works" value="0">Selected works:</option> <option