Question

我正在开展一个项目，一开始就有问题。

<body>
    <div class="container">
        <div class="panel-group">
            <div class="panel panel-default">
                <div class="panel panel-primary">
                    <div class="panel-heading">
                        <h1>Lettergrepen oef-en-en</h1>
                    </div>      <!-- end of panel-heading -->

                    <div class="panel-body">
                        <!-- begin form -->
                        <form action="<?php echo htmlspecialchars($_SERVER["PHP_SELF"]);?>" method="POST">
                            <div class="row">
                                <div class="col-sm-1"><button type="button" class="btn btn-primary"><span><strong><div class="glyphicon glyphicon-volume-up"></div></strong></span></button></div>
                                <div class="col-sm-2"><input type="text" class="wordExercise" name="Huisarts" value="Huisarts" disabled style="background-color: white;"></div>
                                <div class="col-sm-2"><input type="text" name="Huis"></div>
                                <div class="col-sm-2"><input type="text" name="arts"></div>
                                <div class="col-sm-2"><input type="text" name="extra"></div>
                                <div class="col-sm-1"><button type="button" class="btn btn-primary"><span><strong>+</strong></span></button></div>
                            </div> <!-- end of first row -->
                        </form>
                    </div>      <!-- end of panel-body -->          
                </div>      <!-- end panel-primary -->
            </div>      <!--end panel-group -->
        </div>      <!--end container -->
</body>

你看到的代码是bootstrap和一些HTML输入，但当我检查我的网站时，我注意到输入字段是重叠的。当我使用margin: X X X X来解决这个问题时，我发现前端可能看起来很好，但是它们的位置仍然是它们的旧位置（在使用边距之前）并且它在某种程度上与旧位置输入字段重叠，因此我只有一点点我可以单击的输入字段（用于定位要写入的输入字段）。任何想法如何解决这个问题？我以为bootstrap基本上解决了它，但事实并非如此。我想给输入字段一个字体大小为110％，填充为5px到5px。所以请记住，这也是其中的一部分。

到目前为止我的css代码用于它

* {
box-sizing: border-box;
}

.panel-heading {
text-align: center;
}

.wordExercise {
text-align: center;
outline: none !important;
padding: 5px 5px;
font-size: 110%;
}

.btn {
margin: 0 0 0 2vw;
display: inline-block;
outline: none !important;
}

Answer 1

您可能希望提供输入width:100%以使它们适合列大小，然后可能会为您的其他类设置样式，例如给.col-sm-2{padding:0;}或其他任何符合您喜欢的内容：

＆＃13;

* {
box-sizing: border-box;
}

.panel-heading {
text-align: center;
}

.wordExercise {
text-align: center;
outline: none !important;
padding: 5px 5px;
font-size: 110%;
}

.btn {
margin: 0 0 0 2vw;
display: inline-block;
outline: none !important;
}

input{
  width:100%;
  padding:5px;
}

.row .col-sm-2{
  padding:0;
}

＆＃13;

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" rel="stylesheet"/>
    <div class="container">
        <div class="panel-group">
            <div class="panel panel-default">
                <div class="panel panel-primary">
                    <div class="panel-heading">
                        <h1>Lettergrepen oef-en-en</h1>
                    </div>      <!-- end of panel-heading -->

                    <div class="panel-body">
                        <!-- begin form -->
                        <form class="container-fluid" action="<?php echo htmlspecialchars($_SERVER['PHP_SELF']);?>" method="POST">
                            <div class="row">
                                <div class="col-sm-1"><button type="button" class="btn btn-primary"><span><strong><div class="glyphicon glyphicon-volume-up"></div></strong></span></button></div>
                                <div class="col-sm-2"><input type="text" class="wordExercise" name="Huisarts" value="Huisarts" disabled style="background-color: white;"></div>
                                <div class="col-sm-2"><input type="text" name="Huis"></div>
                                <div class="col-sm-2"><input type="text" name="arts"></div>
                                <div class="col-sm-2"><input type="text" name="extra"></div>
                                <div class="col-sm-1"><button type="button" class="btn btn-primary"><span><strong>+</strong></span></button></div>
                            </div> <!-- end of first row -->
                        </form>
                    </div>      <!-- end of panel-body -->          
                </div>      <!-- end panel-primary -->
            </div>      <!--end panel-group -->
        </div>

＆＃13;

Answer 2

只需尝试将class="form-control"添加到每个<input>

中

<body>
    <div class="container">
        <div class="panel-group">
            <div class="panel panel-default">
                <div class="panel panel-primary">
                    <div class="panel-heading">
                        <h1>Lettergrepen oef-en-en</h1>
                    </div>      <!-- end of panel-heading -->

                    <div class="panel-body">
                        <!-- begin form -->
                        <form action="<?php echo htmlspecialchars($_SERVER["PHP_SELF"]);?>" method="POST">
                            <div class="row">
                                <div class="col-sm-1"><button type="button" class="btn btn-primary"><span><strong><div class="glyphicon glyphicon-volume-up"></div></strong></span></button></div>
                                <div class="col-sm-2"><input type="text" class="wordExercise form-control" name="Huisarts" value="Huisarts" disabled style="background-color: white;"></div>
                                <div class="col-sm-2"><input type="text" name="Huis" class="form-control"></div>
                                <div class="col-sm-2"><input type="text" name="arts" class="form-control"></div>
                                <div class="col-sm-2"><input type="text" name="extra" class="form-control"></div>
                                <div class="col-sm-1"><button type="button" class="btn btn-primary"><span><strong>+</strong></span></button></div>
                            </div> <!-- end of first row -->
                        </form>
                    </div>      <!-- end of panel-body -->          
                </div>      <!-- end panel-primary -->
            </div>      <!--end panel-group -->
        </div>      <!--end container -->
</body>

Answer 3

首先，默认情况下border-box在引导程序中，所以不需要自己编写它。 text-center是一个用于对齐文本中心的引导类。 d-inline-block是display: inline-block的引导类。

尝试使用尽可能少的规则（已经包含在bootstrap中的规则）。

另一个提示 - camelCase在CSS中没有被建议的标准使用。

在block内嵌套inline时，不要将div嵌套在span内。

https://jsfiddle.net/g7vnk9z9/8/

我希望这是你想要的。您错过了输入的form-group包装器和输入本身的form-control。

Bootstrap重叠输入字段

3 个答案: