Bootstrap 4 - 边距0不起作用

时间：2018-03-17 21:44:57

标签： css bootstrap-4

我注意到margin: 0px无效。如果您查看屏幕截图，那么您可以看到边距仍然存在，即使它被设置为0左右。

enter image description here

首先，我检查了是否有其他类或ID正在执行此操作，但事实并非如此。

发生了什么事？我甚至用!important尝试了它，但它没有任何区别。

＆＃13;
＆＃13; 
html,
body {
   margin:0;
   padding:0;
   height:100%;
}

.header {
    background: black;
    height: 60px;
    position: fixed;
    z-index: 1;
    width: 100%;
}

.footer {
    position: fixed;
    color: white;
    text-align: center;
    padding-top: 10px;
    background-color: black;
    width: 100%;
    bottom: 0px;
    padding-bottom: 10px; 
}

.main {
    overflow-y: scroll;
    padding-top: 120px;
    padding-bottom: 120px;
}

.content {
    position: relative;
    min-height: 100%;
}

.containerFooter {
    margin-left: auto;
    margin-right: auto;
    font-size: 11px;
}

.innerContainer {
    padding-left: 6%;
}

.carObject {
    display: inline-block;
    border: 2px solid #ffdbdb;
    width: 380px;
    height: 512px;
}

.imagesWrap {
    margin-top: 50px;
    min-height: 250px;
    min-width: 352px;
}

.image {
    /*width: 444px;*/
    height: 280px;
    margin:10px;
    padding-bottom:10px;
}

.car_image {
    display: inline;
    min-height: 400px;
}

.carObjectEdit {
    border: 2px solid #ffdbdb;
    min-width: 300px;
    width: 380px;
}

.carTitleContainer {
    font-family: fantasy;
    padding-top: 0px;
    padding-left: 0px;
    height: 24px;
    /*min-height:40px;*/
}

.close {
    position: absolute;
    margin-right:4px;
    margin-top:4px;

}
    .close:hover {
        color: red;
    }
.edit {
    position: absolute;
    margin-right:4px;
    margin-top:4px;
}
    .edit:hover {
        cursor:pointer;
        color: red;
    }

.carProperties {
    font-size: 12px !important;
    font-family: arial;
}

.detailsDescription {
    min-height: 100px;
    font-size: 12px !important;
    text-align: center;
    border: 1px #d8d8d8 solid;
    padding-top: 10px;
    padding-left: 10px;
    padding-right: 10px;
}

p.detailsDescription {
    margin-bottom: 0px;
}

table.details tr td {

    min-width: 80px;
    text-align: center;
}

table.details tr td:nth-child(odd) {
    font-weight: 600;
    text-align: right;
}

/* --------------Full Responsive Design--------------------*/
.FilterContainer{
    overflow-x:auto;
    margin-top: 150px;
    width: 740px;
    border: 1px outset #FFF;
    -webkit-box-shadow: 10px 11px 43px 7px rgba(0,0,0,0.6);
    -moz-box-shadow: 10px 11px 43px 7px rgba(0,0,0,0.6);
    box-shadow: 10px 11px 43px 7px rgba(0,0,0,0.6);
    padding: 10px;
}
.createContainer {
    width: 900px;
    margin-left: auto;
    margin-right: auto;
}

@media (max-width:1600px) and (min-width:1200px) {
    .createContainer {
        width: 800px;
    }

}
@media (max-width:1200px) and (min-width:769x) {
    .createContainer {
        width: 400px;
    }

}
@media (max-width:769x) and (min-width:360px) {
    .createContainer {
        width: 270px;
    }

}
@media (max-width:360px) {
    .createContainer {
        width: 225px;
    }
}
/*-Login-----------------*/
.navbar-form {
    margin-right: 80px;
    transform: scale(0.85);
    padding-top: 4px;
}

@media (max-width:1850px) and (min-width:1600px) {
        
    .navbar-form {
        width: auto;
        padding-top: 0;
        padding-bottom: 0;
        margin-right: 320px;
        margin-left: 0;
        border: 0;
        -webkit-box-shadow: none;
        box-shadow: none;
        
    }
}

@media (max-width:1600px) and (min-width:1500px) {
    .navbar-form {
        padding-top: 0;
        padding-bottom: 0;
        margin-right: 600px;
        margin-left: 0;
        border: 0;
        -webkit-box-shadow: none;
        box-shadow: none;
    }
}
@media (max-width:1500px) and (min-width:1400px) {
    .navbar-form {
        padding-top: 0;
        padding-bottom: 0;
        margin-right: 650px;
        margin-left: 0;
        border: 0;
        -webkit-box-shadow: none;
        box-shadow: none;
    }
}
@media (max-width:1400px) and (min-width:1300px) {
    .navbar-form {
        padding-top: 0;
        padding-bottom: 0;
        margin-right: 675px;
        margin-left: 0;
        border: 0;
        -webkit-box-shadow: none;
        box-shadow: none;
    }
}
@media (max-width:1300px) and (min-width:1200px) {
    .navbar-form {
        padding-top: 0;
        padding-bottom: 0;
        margin-right: 750px;
        margin-left: 0;
        border: 0;
        -webkit-box-shadow: none;
        box-shadow: none;
    }
}
@media (max-width:1200px) and (min-width:1100px) {
    .navbar-form {
        padding-top: 0;
        padding-bottom: 0;
        margin-right: 800px;
        margin-left: 0;
        border: 0;
        -webkit-box-shadow: none;
        box-shadow: none;
    }
}
@media (max-width:1100px) and (min-width:600px) {
    .navbar-form {
        padding-top: 0;
        padding-bottom: 0;
        margin-right: 1000px;
        transform:scale(0.75);
        margin-left: 0;
        border: 0;
        -webkit-box-shadow: none;
        box-shadow: none;
    }
}
@media (max-width:1000px) and (min-width:800px) {
    .navbar-form {
        padding-top: 0;
        padding-bottom: 0;
        margin-right: 1080px;
        transform:scale(0.75);
        margin-left: 0;
        border: 0;
        -webkit-box-shadow: none;
        box-shadow: none;
    }
}
@media (max-width:800px) and (min-width:600px) {
    .navbar-form {
        padding-top: 0;
        padding-bottom: 0;
        margin-right: 1100px;
        transform:scale(0.75);
        margin-left: 0;
        border: 0;
        -webkit-box-shadow: none;
        box-shadow: none;
    }
    .FooterButton {
        font-size: 14px;
    }
}
@media (max-width:600px) and (min-width:300px) {
    .navbar-form {
        padding-top: 0;
        padding-bottom: 0;
        margin-right: 1100px;
        transform:scale(0.75);
        margin-left: 0;
        border: 0;
        -webkit-box-shadow: none;
        box-shadow: none;
    }
    .FooterButton {
        font-size: 13px;
    }
}
@media (max-width:300px) {
    .navbar-form {
        padding-top: 0;
        padding-bottom: 0;
        margin-right: 1100px;
        transform:scale(0.75);
        margin-left: 0;
        border: 0;
        -webkit-box-shadow: none;
        box-shadow: none;
    }
    .FooterButton {
        font-size: 12px;
    }
}

/* On smaller screens, where height is less than 450px, change the style of the sidenav (less padding and a smaller font size) */
@media screen and (max-height: 450px) {
    .sidenav {padding-top: 15px;}
    .sidenav a {font-size: 18px;}
}
/* ENDE --------------Full Responsive Design--------------------*/
/* ------------------ diverses ----------------------*/

.error {
    padding:10px;
    color: red;
}

.errorLog {
    color: red;
}

a.animatedLink {
  position: relative;
  text-decoration: none;
}

a.animatedLink:hover {
    text-decoration: none;
}

a.animatedLink:hover::after, a.animatedLink:focus::after {
  opacity: 1;
  transform: translateY(-4px);
}

a.animatedLink::after {
  position: absolute;
  top: 100%;
  left: 0;
  width: 100%;
  height: 2px;
  background: white;
  content: '';
  opacity: 0;
  transition: opacity 0.3s, transform 0.3s;
  transform: translateY(8px);
}

/* ------------------ constantin --------------------*/

.ListContainer{
    margin-top: 120px;
    width: 850px;
    border: 1px outset #FFF;
    -webkit-box-shadow: 10px 11px 43px 7px rgba(0,0,0,0.6);
    -moz-box-shadow: 10px 11px 43px 7px rgba(0,0,0,0.6);
    box-shadow: 10px 11px 43px 7px rgba(0,0,0,0.6);
    padding: 10px;
}

.DetailContainer{
    margin-top: 120px;
    width: 1200px;
    border: 1px outset #FFF;
    -webkit-box-shadow: 10px 11px 43px 7px rgba(0,0,0,0.6);
    -moz-box-shadow: 10px 11px 43px 7px rgba(0,0,0,0.6);
    box-shadow: 10px 11px 43px 7px rgba(0,0,0,0.6);
    padding: 10px;
}

.KontaktContainer{
    margin-top: 40px;
    width: 850px;
    height: 550px;
    border: 1px outset #FFF;
    -webkit-box-shadow: 10px 11px 43px 7px rgba(0,0,0,0.6);
    -moz-box-shadow: 10px 11px 43px 7px rgba(0,0,0,0.6);
    box-shadow: 10px 11px 43px 7px rgba(0,0,0,0.6);
    padding: 10px;
}

.InseratContainer{
    margin-top: 120px;
    width: 740px;
    border: 1px outset #FFF;
    -webkit-box-shadow: 10px 11px 43px 7px rgba(0,0,0,0.6);
    -moz-box-shadow: 10px 11px 43px 7px rgba(0,0,0,0.6);
    box-shadow: 10px 11px 43px 7px rgba(0,0,0,0.6);
    padding: 10px;
}

.form-group{
    padding: 7px;
}

label{
    width: 150px;
}

select{
    width: 220px !important;
}

input{
    width: 220px !important;
}

.SubmitButton{
    padding-top: 20px;
    text-align:center;
}

button{
    font-size: 20px !important;
}

h3{
    text-align:center;
    margin-bottom:30px;
}

.Login{
    position: absolute;
    right: 7px;
}


.navbar-inverse{
    height: 60px;
}

.navbar-brand{
    position: absolute;
    left: 13px;
    top: 5px;
    font-size: 25px;
    color: white;
}
.navbar-brand:hover{
    color: red;
}

.Menu{
    position: absolute;
    left: 400px;
    top: 5px;
    font-size: 25px;
}

 /* The side navigation menu */
.sidenav {
    color: white;
    margin-top: 60px;
    height: 100%;
    width: 0;
    position: fixed;
    z-index: 0;
    top: 0;
    right: 0;
    background-color: #2d2d2d;
    overflow-x: hidden;
    padding-top: 60px;
    transition: 0.5s;
}


/* The navigation menu links */
.sidenav a {
    padding: 8px 8px 8px 32px;
    text-decoration: none;
    font-size: 25px;
    color: #818181;
    display: block;
    transition: 0.3s
}

/* When you mouse over the navigation links, change their color */
.sidenav a:hover, .offcanvas a:focus{
    color: #f1f1f1;
}

/* Position and style the close button (top right corner) */
.closebtn {
    position: absolute;
    top: 0;
    right: 10px;
    font-size: 36px;
    margin-left: 50px;
    color: white;
    background-color: #2d2d2d;
    border: 1px;
}

/* Style page content - use this if you want to push the page content to the right when you open the side navigation */
#main {
    transition: margin-left .5s;
    padding: 20px;
}



.MenuHide{
    transform: scale(0.5);
    padding-left:50px;
    position:absolute;
    top: -3px;
    right:15px;
    margin: 15px;
    z-index: 500;
}
    .MenuHide:hover{
        cursor: pointer;
    }

.btn{
    text-align: left;
}

.modal-dialog-reg{
    width: 268px !important;
}

.modal-dialog-anm{
    width: 505px !important;
}

.modal-footer{
    text-align: center;
}



.ListImg{
    width: 250px;
    height: 150px;
    margin-right: 25px;
}

.ListView{
    text-decoration: none;
}

.CarouselContainer{
    width: 600px;
    height: 400px;
}

.DetailImg{
    width: 600px;
    height: 380px;
}

.backendContainer {
    border:1px solid black;
}
.backendContainer img {
    height: 175px;
    border: none;
}

.deleteAreYouSure {
    width: 100%;
    margin: 4px;
}
.edit {
    width: 100%;
    margin: 4px;
}

.FooterButton{
    color: #d4d4d4;
    font-size: 20px;
    text-decoration: none;
    margin-left: 20px;
}

.FooterButton:hover{
    color: white;
}

.FooterTitle {
    margin: 0px;
    padding: 10px;
}
＆＃13; 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet"/>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8"/>
<meta http-equiv="X-UA-Compatible" content="IE=edge"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<meta name="description" content="Simple CMS"/>
<meta name="author" content="Sheikh Heera"/>

<title>LaraPress</title>

<body>
    <div class="header">
       <div class="container">
    <div class="row">

        <div class="col-lg-10">
            <a class="navbar-brand" href='http://localhost/-auto-shop/shop/public'>This is the header</a>
        </div>

        <div class="col-lg-1"></div>
            <div class="col-lg-1 MenuHide" onClick="openNav();" id="MenuHide">
                <img class="MenuHideIcon" src="http://localhost/-auto-shop/shop/public/img/menu.png">
            </div>
        </div>
</div> 
    </div>
    <div class="content">
        <div class="main">
            <div class="container m-0">
              <div class="row">
                <div class="col-lg-10 col-md-10 col-sm-10 col-xs-10">
                  <h2>Datenschutz</h2>
                      Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. 

                      Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. 

                      Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. 

                      Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. 

                      Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis. 

                      At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, At accusam aliquyam diam diam dolore dolores duo eirmod eos erat, et nonumy sed tempor et et invidunt justo labore Stet clita ea et gubergren, kasd magna no rebum. sanctus sea sed takimata ut vero voluptua. est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat. 

                      Consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus. 

                      Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. 

                      Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. 

                      Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. 
                </div>
                <div class="col-lg-2 col-md-2 col-sm-2 col-xs-2">
                            <!-- SideNav -->
                <div id="mySidenav" class="sidenav">
                    <button class="closebtn" onclick="closeNav()">
                        <i class="fa fa-window-close" aria-hidden="true"></i>
                    </button>
                        <a href="http://localhost/-auto-shop/shop/public/user/showAccount"><i class="fa fa-id-card"></i>&nbsp;Hans</a>

                    <a href='http://localhost/-auto-shop/shop/public/car/showAll'><i class="fa fa-th-list" aria-hidden="true"></i>&nbsp;Inserate</a>

                            <a href='http://localhost/-auto-shop/shop/public/car/create'><i class="fa fa-newspaper-o" aria-hidden="true"></i>&nbsp;Verkaufen</a>
                        <a href='http://localhost/-auto-shop/shop/public/logout'><i class="fa fa-sign-out" aria-hidden="true"></i> Abmelden</a>
                    </div>
                <!-- SideNav ENDE -->	
                </div>
              
              </div>
            </div>
        </div>
    </div>
    <div class="footer">
        <h3 class="FooterTitle">&copy; 2017 </h3>

<div class="FooterButtonWrap">
    <a class="FooterButton animatedLink" href='http://localhost/-auto-shop/shop/public/impressum'>Impressum</a>
    <a class="FooterButton animatedLink" href='http://localhost/-auto-shop/shop/public/datenschutz'>Datenschutz</a>
    <a class="FooterButton animatedLink" href='http://localhost/-auto-shop/shop/public/haftungsausschluss'>Haftungsausschluss</a>
    <a class="FooterButton animatedLink" href='http://localhost/-auto-shop/shop/public/agb'>AGB</a>
    <a class="FooterButton animatedLink" href='http://localhost/-auto-shop/shop/public/kontakt'>Kontakt</a>
</div>    </div>

</body>
＆＃13;
＆＃13;
＆＃13;

Jsfiddle

更新：

它与奇怪的@media设置有关。 我注意到，如果我取消选中其中每一个，它就有效：

enter image description here

为什么Bootstrap 4设计得像这样？如何禁用此功能＆＃34;功能＆＃34;？

编辑：我＆＃34;降级＆＃34;再次到3.3.7，再也没有头疼......

2 个答案:

答案 0 :(得分：2)

您正在使用.m-0，margin:0!important;适用.container auto，width使用.container的左右边距值，并结合硬编码{{} 1}} s，居中。

如果您希望.container-fluid填满整个屏幕，请使用.m-0。

关于使用margin等的充分说明：

不幸的是，Bootstrap选择了一种奇怪的（如果你问我）方式来开发一个在v4中强加padding和!important s的新系统。它很奇怪（而且是错误的，恕我直言），因为它在特异性方面太强大了 简而言之，它意味着对m-*和p-*类使用!important。当您需要响应性地应用不同的边距/填充值时，它还会产生许多问题 就我而言，这是一个错误，在我的任何项目中，我个人都选择不使用这个系统。

如果您选择使用它们，请习惯使用.className和至少一个.m-*来在Bootstrap的选择器上应用您想要的值。

显而易见的替代方法是根本不使用.p-*和margin类，并应用padding和!important s，就像之前版本的Bootstrap一样，而不需要使用{{1}}。

注意：发布代码图片是非常错误的（在SO上），原因如下：

  • 它拒绝编制索引，因此具有类似错误的人无法通过搜索错误（当您发布错误时）找到它
  • 大多数情况下，如果您看到结果并检查结果，那么理解代码会更容易，更快，这在发布代码图像时是不可能的

请考虑使用实际代码替换图片，或在问题中添加Minimal, Complete, and Verifiable example，以解决您的问题。

答案 1 :(得分：0)

Bootstrap4使用flexbox。尝试设置display: inline-flex - 您可以添加课程：.d-inline-flex

相关问题
最新问题