Question

我正在为我的应用程序使用bootstrap，我发现它增加了15px填充。我抬头看着可能的错误，看起来好像我正在犯这些错误（比如把一个容器放在一排等）

这是我的代码。

<div class="container-fluid">
        <header id="topheader">
            <div class="row">
                <div class="col-md-3">
                    <h3 id="logo"><span id="d1">D</span> <span id="two">2</span> <span id="d2">D</span></h3>
                </div>
                <div class="col-md-9">
                    <form id="fullform"> 
                        <div id="formdiv" class="row">
                            <div class="col-md-2"></div>
                            <div class="col-md-2"></div>
                            <div style="" class="col-md-3 login">
                                <label for="email"></label>
                                <input class="login_input" type="text" name="email" placeholder="Type your email here">
                            </div>
                            <div style="" class="col-md-3 login">
                                <input class="login_input" type="password" name="password" placeholder="Type your password here">
                            </div>
                        </div>
                    </form>
                </div>
            </div>
        </header>
    </div>

我也在添加我的CSS：

body html {
    padding: 0;
    margin: 0;
    /*background-color: black;*/

}

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

#topheader {
    position: relative;
    background-color: #563d7c; 
    box-shadow: 8px 6px 2px black;
}

#logo {
    position: relative;
    left: 6vw;
    /*top: -3vh;*/
    color: white;
}

.login {
    position: relative;
    /*top: 4vh;*/
    height: 12vh;
}

.login_input {
    position: absolute;
    top: 3vh;
}

#formdiv {
    left: 5vw;
}

#d1 {
    position: relative;
    font-size: 5vh;
    transform: rotate(40deg); 
}

input{
  /*background: #ecf0f1;*/
  width: 15vw;
  padding: 10px;
  font-family: "Open Sans";
  color: #7f8c8d;
  border-style: solid;
  border-width: 0;
  border-bottom-width: 3px;
  border-color: #bdc3c7;
  outline: none;
  border-radius: 5px 0px 5px 0px;
  -webkit-transition: 0.1s ease-in-out;
}

input:focus{
  border-color: #3498db;
  color: #34495e;
}


@media screen and (max-width: 989px) {
    #logo {
        left: 35vw;
    }
    .login {
        position: relative;
        /*top: 4vh;*/
        height: 7vh;
    }
    .login_input {
        top: -1vh;
        left: 25vw;
    }
    input {
        width: 50vw;
    }
}

Answer 1

Bootstrap立即要求容器流体类之后的行。你在那里添加标题标记。删除标题标记，您可以添加id =＆＃34; topheader＆＃34;到了div。行类减去15像素。请尝试以下方法：

<div class="container-fluid">

        <div class="row" id="topheader">
            <div class="col-md-3">
                <h3 id="logo"><span id="d1">D</span> <span id="two">2</span> <span id="d2">D</span></h3>
            </div>
            <div class="col-md-9">
                <form id="fullform"> 
                    <div id="formdiv" class="row">
                        <div class="col-md-2"></div>
                        <div class="col-md-2"></div>
                        <div style="" class="col-md-3 login">
                            <label for="email"></label>
                            <input class="login_input" type="text" name="email" placeholder="Type your email here">
                        </div>
                        <div style="" class="col-md-3 login">
                            <input class="login_input" type="password" name="password" placeholder="Type your password here">
                        </div>
                    </div>
                </form>
            </div>
        </div>
</div>

如果您不想删除标头标记。然后将容器流体div包装成标头标签。这也可以像：

<header id="topheader">
    <div class="container-fluid">

        <div class="row">
            <div class="col-md-3">
                <h3 id="logo"><span id="d1">D</span> <span id="two">2</span> <span id="d2">D</span></h3>
            </div>
            <div class="col-md-9">
                <form id="fullform"> 
                    <div id="formdiv" class="row">
                        <div class="col-md-2"></div>
                        <div class="col-md-2"></div>
                        <div style="" class="col-md-3 login">
                            <label for="email"></label>
                            <input class="login_input" type="text" name="email" placeholder="Type your email here">
                        </div>
                        <div style="" class="col-md-3 login">
                            <input class="login_input" type="password" name="password" placeholder="Type your password here">
                        </div>
                    </div>
                </form>
            </div>
        </div>
   </div>
 </header>

Answer 2

你是否要求这个15px填充是容器流体类的属性

在这种情况下，只需乘坐容器流体类并将padding-left：0和padding-right：0;

像这样，

.container-fluid{
 padding-left:0;
 padding-right:0;
}

将其放在另一个文件中，不要更改bootstrap的css文件

Bootstrap容器在网页的右端添加填充

2 个答案: