SitePoint Sponsor

User Tag List

Results 1 to 5 of 5
  1. #1
    SitePoint Enthusiast mildfoam's Avatar
    Join Date
    May 2010
    Location
    Australia.
    Posts
    56
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)

    how to remove this margin-left ...

    hi there,

    i am just trying to learn about bootstrap and create really simple online store but i got a problem. here are my code: http://pastebin.com/Nth7m82j. You can see that code and what i want to do is to print my product (from database) in #main-box then it must auto move to new line when it have to print 4 product each line. This is the result pic and make me confuse ...



    Please someone help me to fix my problem. I just want to fetch producst from database and print 4 products each line and move to new line after that. So sorry for my bad english

    Thank You
    Object Oriented Programming Fans Boy ?

  2. #2
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,117
    Mentioned
    448 Post(s)
    Tagged
    8 Thread(s)
    Presumably there's too much padding or margin on the columns. It would be more helpful to have a working demo (free of PHP etc.). Just insert the relevant HTML and CSS into a template like this:

    Code:
    <!DOCTYPE html>
    <html lang="en">
    <head>
    <meta charset="utf-8">
    	
    <style>
    
    your CSS here
    
    </style>
    	
    </head>
    <body>
    
    your HTML here
    
    </body>
    </html>

    Full guidelines:
    http://www.sitepoint.com/forums/show...Posting-Basics
    Facebook | Google+ | Twitter | Web Design Tips | Free Contact Form

    Forum Usage: Tips on posting code samples, images and more

    Forrest Gump: "IE is like a box of chocolates: you never know what you're gonna get."

  3. #3
    SitePoint Enthusiast mildfoam's Avatar
    Join Date
    May 2010
    Location
    Australia.
    Posts
    56
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    i don't know about padding & margin of this element cause i just use span3 on bootstraps, mate.

    i fetch the content from database so i need php at current time.
    Object Oriented Programming Fans Boy ?

  4. #4
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,117
    Mentioned
    448 Post(s)
    Tagged
    8 Thread(s)
    We can't help unless we can see the CSS and the HTML that goes with it. But it needs to be in a for we can actually test. You could view the source code of the rendered page, grab the relevant code and paste it into the template I gave above. Or just link to the site. But PHP is not relevant to the issue, so should be left out.
    Facebook | Google+ | Twitter | Web Design Tips | Free Contact Form

    Forum Usage: Tips on posting code samples, images and more

    Forrest Gump: "IE is like a box of chocolates: you never know what you're gonna get."

  5. #5
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,295
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    When you nest span classes in bootstrap you need to create a fluid-grid parent to hold the inner elements.

    Code:
    <div class="span8" id="main-box">
        <div class="row-fluid">
         <div class="span3">Fluid 3</div>
         <div class="span3">Fluid 3</div>
         <div class="span3">Fluid 3</div>
         <div class="span3">Fluid 3</div>
       </div>
    </div>
    In that way the margin-left on the first div is removed automatically by the bootstrap rules.
    bootstrap css:
    Code:
    .row-fluid [class*="span"]:first-child {
        margin-left: 0;
    }


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •