Question

     <div class="row">
                        <div class="col-md-6 my-3">
                            <div class="card card-outline-secondary">
                                <div class="card-body">
                                    <form class="form" role="form" autocomplete="off">
                                        <div class="form-group row">
                                            <label class="col-md-3 col-form-label form-control-label">First Name</label>
                                            <div class="col-md-9">
                                                <input class="form-control" type="text" value="" readonly />
                                            </div>
                                        </div>
                                        <div class="form-group row">
                                            <label class="col-lg-3 col-form-label form-control-label">Last name</label>
                                            <div class="col-lg-9">
                                                <input class="form-control" type="text" value="" readonly />
                                            </div>
                                        </div>
                                        <div class="form-group row">
                                            <label class="col-lg-3 col-form-label form-control-label">Middle name</label>
                                            <div class="col-lg-9">
                                                <input class="form-control" type="text" value="" readonly />
                                            </div>
                                        </div>
                                        <div class="form-group row">
                                            <label class="col-lg-3 col-form-label form-control-label">Name Extension</label>
                                            <div class="col-lg-9">
                                                <input class="form-control" type="text" value="" readonly />
                                            </div>
                                        </div>
                                        <div class="form-group row">
                                            <label class="col-lg-3 col-form-label form-control-label">Date of Birth</label>
                                            <div class="col-lg-9">
                                                <input class="form-control" type="date" value="" readonly />
                                            </div>
                                        </div>
                                        <div class="form-group row">
                                            <label class="col-lg-3 col-form-label form-control-label">Gender</label>
                                            <div class="col-lg-9">
                                                <input class="form-control" type="text" value="" readonly />
                                            </div>
                                        </div>
                                        <div class="form-group row">
                                            <label class="col-lg-3 col-form-label form-control-label"></label>
                                            <div class="col-lg-9">
                                                <input type="reset" class="btn btn-secondary" value="Cancel">
                                                <input type="button" class="btn btn-primary" value="Save Changes">
                                            </div>
                                        </div>
                                    </form>
                                </div><!-- card body -->
                            </div> <!-- card-outline -->
                        </div>
                    </div>

我要使文本框以全角显示。我进行了研究，发现宽度默认为全角，但在我的工作中宽度为固定大小。

Answer 1

您需要使用完整的来定义父div

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
</head>
<body>
  
<div class="container">
      <div class="row">
                        <div class="col-md-12 my-6">
                            <div class="card card-outline-secondary">
                                <div class="card-body">
                                    <form class="form" role="form" autocomplete="off">
                                        <div class="form-group row">
                                            <label class="col-md-3 col-form-label form-control-label">First Name</label>
                                            <div class="col-md-9">
                                                <input class="form-control" type="text" value="" readonly />
                                            </div>
                                        </div>
                                        <div class="form-group row">
                                            <label class="col-lg-3 col-form-label form-control-label">Last name</label>
                                            <div class="col-lg-9">
                                                <input class="form-control" type="text" value="" readonly />
                                            </div>
                                        </div>
                                        <div class="form-group row">
                                            <label class="col-lg-3 col-form-label form-control-label">Middle name</label>
                                            <div class="col-lg-9">
                                                <input class="form-control" type="text" value="" readonly />
                                            </div>
                                        </div>
                                        <div class="form-group row">
                                            <label class="col-lg-3 col-form-label form-control-label">Name Extension</label>
                                            <div class="col-lg-9">
                                                <input class="form-control" type="text" value="" readonly />
                                            </div>
                                        </div>
                                        <div class="form-group row">
                                            <label class="col-lg-3 col-form-label form-control-label">Date of Birth</label>
                                            <div class="col-lg-9">
                                                <input class="form-control" type="date" value="" readonly />
                                            </div>
                                        </div>
                                        <div class="form-group row">
                                            <label class="col-lg-3 col-form-label form-control-label">Gender</label>
                                            <div class="col-lg-9">
                                                <input class="form-control" type="text" value="" readonly />
                                            </div>
                                        </div>
                                        <div class="form-group row">
                                            <label class="col-lg-3 col-form-label form-control-label"></label>
                                            <div class="col-lg-9">
                                                <input type="reset" class="btn btn-secondary" value="Cancel">
                                                <input type="button" class="btn btn-primary" value="Save Changes">
                                            </div>
                                        </div>
                                    </form>
                                </div><!-- card body -->
                            </div> <!-- card-outline -->
                        </div>
                    </div>         
</div>

</body>
</html>

Answer 2

您的<form>嵌套在card内；您的card嵌套在col-md-6的{{1}}内部；

从row开始，您的media(min-width: 992px)只会获得

1/2 * 9/12 =总宽度的37.5％。

您的表单标签和输入内容已经使用了卡片的整个宽度。问题是，卡未使用容器的整个宽度。

要解决此问题，您可以完全删除form-control和<div class="row">，也可以将<div class="col-md-6 my-3">更改为<div class="col-md-6 my-3">

小提琴： http://jsfiddle.net/aq9Laaew/86873/

在Bootstrap 4中，文本框表单控件宽度不起作用。文本框不会以全角显示。我正在使用asp.net mvc 5

2 个答案: