javascript - Bootstrap: Remove column margin - Stack Overflow

admin管理员组

文章数量:1290230

I have a three-column layout and I need to remove the margin from the left and right.

<div class="container">
  <h1>Hello World!</h1>
  <p>Resize the browser window to see the effect.</p>
  <div class="row row-no-padding">
    <div class="col-sm-4" style="background-color:lavender;">.col-sm-4</div>
    <div class="col-sm-4" style="background-color:lavenderblush;">.col-sm-4</div>
    <div class="col-sm-4" style="background-color:lavender;">.col-sm-4</div>
  </div>
</div>

I tried

.row-no-padding {
   margin-left: 0;
   margin-right: 0;
}

with no result... fiddle

EDIT: I need to keep the class="container" intact.

So, what I need: and what I have now:

EDIT: So, based on what Ricky_Ruiz said about .container properties: I wanted in 100% browser window to make margin-left and margin-right equal zero. Say, my screen resolution is 1300, so I just needed to include this in .css file:

@media (min-width: 1300px) {
  .container {
    width: 1300px;
  }
}

I have a three-column layout and I need to remove the margin from the left and right.

<div class="container">
  <h1>Hello World!</h1>
  <p>Resize the browser window to see the effect.</p>
  <div class="row row-no-padding">
    <div class="col-sm-4" style="background-color:lavender;">.col-sm-4</div>
    <div class="col-sm-4" style="background-color:lavenderblush;">.col-sm-4</div>
    <div class="col-sm-4" style="background-color:lavender;">.col-sm-4</div>
  </div>
</div>

I tried

.row-no-padding {
   margin-left: 0;
   margin-right: 0;
}

with no result... fiddle

EDIT: I need to keep the class="container" intact.

So, what I need: and what I have now:

EDIT: So, based on what Ricky_Ruiz said about .container properties: I wanted in 100% browser window to make margin-left and margin-right equal zero. Say, my screen resolution is 1300, so I just needed to include this in .css file:

@media (min-width: 1300px) {
  .container {
    width: 1300px;
  }
}

• javascript
• html
• css
• twitter-bootstrap

Share Improve this question Follow edited Oct 15, 2016 at 1:42 parsecer asked Oct 13, 2016 at 17:08 parsecerparsecer 5,1761919 gold badges8484 silver badges167167 bronze badges 0

Add a ment  | 

7 Answers 7

Sorted by: Reset to default 3

You just need to remove the margin from the .row class and the padding from the .col classes.

.row-no-padding {
  margin-left: 0;
  margin-right: 0;
}

[class*="col-"],  /* Elements whose class attribute begins with "col-" */
[class^="col-"] { /* Elements whose class attribute contains the substring "col-" */
  padding-left: 0;
  padding-right: 0;
}

Note: In the demo we will be using !important for code snippet specificity purposes. In production just reference this classes below bootstrap.css.

---

Code Snippet:

.row {
  border: .1em dashed dodgerblue;
}
.row-no-padding {
  margin-left: 0 !important;
  margin-right: 0 !important;
}
[class*="col-"],
[class^="col-"] {
  padding-left: 0 !important;
  padding-right: 0 !important;
}

<link href="https://maxcdn.bootstrapcdn./bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
  <h1>Hello World!</h1>
  <p>Resize the browser window to see the effect.</p>
  <div class="row row-no-padding">
    <div class="col-sm-4" style="background-color:lavender;">.col-sm-4</div>
    <div class="col-sm-4" style="background-color:lavenderblush;">.col-sm-4</div>
    <div class="col-sm-4" style="background-color:lavender;">.col-sm-4</div>
  </div>
</div>

---

EDIT:

What the OP actually wants is to have a child element wider than its parent.

Even though this can be achieved in different ways, I do not remend it.

The best approach is to use different containers for content. That's why Bootstrap has a class named .container-fluid. You just set the padding value to 0 in this class and you're good to go.

---

Code Snippet:

body {
  margin: 0;
}
main {
  background-color: coral;
}
.container-fluid--no-padding {
  padding-left: 0 !important;
  padding-right: 0 !important;
}
.row {
  border: .1em dashed dodgerblue;
}
.row-no-padding {
  margin-left: 0 !important;
  margin-right: 0 !important;
}
[class*="col-"],
[class^="col-"] {
  padding-left: 0 !important;
  padding-right: 0 !important;
}

<link href="https://maxcdn.bootstrapcdn./bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<main>
  <div class="container">
    <h1>Hello World!</h1>
    <p>Resize the browser window to see the effect.</p>
  </div>
  <div class="container-fluid container-fluid--no-padding">
    <div class="row row-no-padding">
      <div class="col-sm-4" style="background-color:lavender;">.col-sm-4</div>
      <div class="col-sm-4" style="background-color:lavenderblush;">.col-sm-4</div>
      <div class="col-sm-4" style="background-color:lavender;">.col-sm-4</div>
    </div>
  </div>
  <div class="container">
    <h1>Hello World!</h1>
    <p>Resize the browser window to see the effect.</p>
  </div>
</main>

---

FURTHER EXPLANATION:

How does the .container class in Bootstrap works?

The .container class sets a fixed width to its element in different viewports, using CSS media queries.

Since Bootstrap is mobile first, the value of the width property in the .container class is auto (Block level element default width). It then changes accordingly to its viewport with the queries.

You can see what it does here:

.container {
  margin-right: auto;
  margin-left: auto;
  padding-left: 15px;
  padding-right: 15px;
}
@media (min-width: 768px) {
  .container {
    width: 750px;
  }
}
@media (min-width: 992px) {
  .container {
    width: 970px;
  }
}
@media (min-width: 1200px) {
  .container {
    width: 1170px;
  }
}

The .container-fluid class properties are just the ones below:

.container-fluid {
  margin-right: auto;
  margin-left: auto;
  padding-left: 15px;
  padding-right: 15px;
}

Try this:

.row-no-padding {
  padding-left: 0;
  padding-right: 0;
}

.row-no-padding.col-sm-4 {
  padding: 0;
}

<div class="container">
  <h1>Hello World!</h1>
  <p>Resize the browser window to see the effect.</p>
  <div class="row row-no-padding">
    <div class="col-sm-4" style="background-color:lavender;">.col-sm-4</div>
    <div class="col-sm-4" style="background-color:lavenderblush;">.col-sm-4</div>
    <div class="col-sm-4" style="background-color:lavender;">.col-sm-4</div>
  </div>
</div>

You are using .container, use .container-fluid instead

Your fiddle has almost the right css but you have pasted it into the javascript window. You also have the class listed twice. I have updated to the following:

.row-no-padding {
    margin-left: 0;
    margin-right: 0;
    [class*="col-"] {
        padding-left: 0 !important;
        padding-right: 0 !important;
    }
}

See in action here:

http://codepen.io/egerrard/pen/LRmpYj

If you want to target the divs with the class col-sm-4, then you can do so like this:

.row-no-padding {
    margin-left: 0;
    margin-right: 0;
}
.row-no-padding .col-sm-4 {
    padding-left: 0;
    padding-right: 0;
}

There's no need to add important if you chain classes and/or ids together (it's like adding up values, with ids being the most points, classes being the next and then tag names). This will keep the code cleaner and more usable in the future.

The fiddle has the css in the JavaScript area and it's structured like LESS or SASS, so it won't run. Probably just an over-site. Here's another: fiddle

If you want to remove all margins on the container you can set the container to full with and remove padding:

body > .container {
    padding-left: 0;
    padding-right: 0;
    width: 100%;
}

fiddle

Use .container-fluid instead of .container.

The margin you see es from the width set by the container-width.

another simple option is:

.row {
    margin-left: 0px;
    margin-right: 0px;
}

.col-12 {
    padding-left: 0px;
    padding-right: 0px;
}

本文标签： javascriptBootstrap Remove column marginStack Overflow