responsive-design

问题 I have a Bootstrap layout but I need it to be responsive and not sure how to do this horizontally. How can I make that layout using standard Bootstrap layout but also have it be responsive? I currently have it with the "labels" in one fluid row and the inputs in another fluid row but when it is "shrunk", the labels no longer fit with the inputs. 回答1: Have you considered nesting by making a single .row-fluid with five .spans inside it and two more .row-fluids inside each span? This way there

问题 I am in the middle of building a responsive landing page for a company and the position of the CTA is refusing to work outside of chrome. Here is is working perfectly in chrome, reducing in size as I want it to: http://hydraservers.net/builds/ The following CSS is achieving that. #page1Container { max-height: 700px; min-height: 700px; } #page1Background { background: #c5c5c5 url(../../../media/bg.jpg) no-repeat; background-position: 50% 50%; background-size: cover; width: 100%; height: 100%;

问题 I have an responsive Owl Carousel (v2), each item or slide has an image and below that some text of variable length, see image below: As can be seen, all the images are bottom aligned to the same baseline, regardless of how much text there is. I've done this by setting the text div to a fixed height. The problem is, if there were to be just one line of text, I'd have unnecessary space below the carousel. If I allow the div to set its own height, I get this: So my images are no longer lined up

问题 I have this basic example that should display these three table cells as blocks (underneath each other) on mobile devices. Yet this doesn't seem to work out on iPad, iPhone, nor on a Samsung phone. It does work on regular browsers and websites that simulate a mobile display (for web pages probably), but when viewing on actual mail clients of mobile devices, the display: block property seems to be ignored. Is there anything that's missing? Or if the display -attribute isn't supported at all,

问题 I'm making a website and I'm trying to make it responsive. The first thing that I want to make responsive is the header. On the header I have the logo of the website and 5 buttons that are "Home", "About", "Team" and "Contact Us" The HTML looks like this: <div class="clearfix" id="header" style=""> <div class="clearfix" id="logo" style=""> <!-- Lynxus Logo --> <a class="nonblock nontext museBGSize grpelem" id="u223" href="index.html"><!-- simple frame --></a> </div> <div class="clearfix" id=

问题 How can I make this function run on load and on window resize? thanks. jQuery(function( $ ) { var headerHeight = $("#header").outerHeight(); var viewportHeight = $(window).height(); var elementNewHeight = viewportHeight - headerHeight; $(".fullHeightThis").outerHeight(elementNewHeight); }); 回答1: jQuery(function( $ ) { function someStuff(){ var headerHeight = $("#header").outerHeight(); var viewportHeight = $(window).height(); var elementNewHeight = viewportHeight - headerHeight; $("

问题 I have one PSD design, which 1980px (full-width), and I need to convert it to HTML, using Bootstrap 3. I do know that Bootstrap 3 has an option to fluid grids, but my question is **how can I count number of columns needed for each section on website? ** If this is that, 1980px design: How can I know how many columns to set for the black, red, and blue section? 回答1: Here's an overlay of columns on your example: So in this case, your html would look something like this: <div class="row"> <div

问题 I use the framework "unsemantic". When I create a grid of 4 columns, if all elements of the grid haven't the same height, the grid breaks ( from the third block ) when I reduce the window. See here http://cemf.fr/lpem/paul-meyer/ Anyone know how to fix this? Html : <article class="grid-50 tablet-grid-50 mobile-grid-100"> /* MY CONTENT HERE */ </article> 回答1: ya it is happening because of the height of your first column. One way is to create grid-container for every row. <div class="grid

问题 I am using the ResponsableCSS (.com) grid for LESS. It all works great, the only problem I have is that I can't amend the gutter widths so that if I have the following: - Two divs side by side split into 2 columns using: - header { div { .column(6); } } The overall grid is 12 divided by 6 = 2 But I want to show the divs side by side with no gutter on the left on the first element and no gutter on the right on the second element. This would enable me to have 2 elements side by side with a

问题 I have created activity but both have different look. Image of Nexsus 10 Image of 320 x 480 Image At first image it shows too much spaces at bottom . how can I resolve that problem ? How do i make that responsive. Thank you in advance 回答1: Checkout this Basically: keep diffrent versions of your layout in folders in example layout-hdpi layout-mdpi layout-other_selector_that_you_want etc 回答2: You will need to make the login page for both handset and tablet devices, and tweak the layouts