Question

我想创建一个面板（如果它是一个面板），如

我尝试使用此代码制作它：

<div class="row">
    <div class="col-md-6">
        <div class="panel panel-default">
            <div class="panel-body">
                <div class="row">

                    </div>
                </div>
            </div>
        </div>
    <div class="col-md-6">
        <div class="panel panel-default">
            <div class="panel-body">
                <div class="row">

                </div>
            </div>
        </div>
    </div>
    </div>

它制作了两个面板，但它们之间存在差距。我该如何处理这个问题？

Answer 1

我做了一个模拟这个例子的傻瓜。 exmaple

基本上我添加一个制作rtl的CSS。 bootstrap-rtl

并且html的代码是这样的。希望它有所帮助。

<body>
    <div class="container">
      <div class="row">
        <div class="col-xs-12 col-md-6">
          <div class="panel panel-default">
            <div class="panel-body">
              <form>
                <div class="form-group">
                  <label for="exampleInputEmail1">Email address</label>
                  <input type="email" class="form-control" id="exampleInputEmail1" placeholder="Email">
                </div>
                <div class="form-group">
                  <label for="exampleInputPassword1">Password</label>
                  <input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password">
                </div>

                <div class="checkbox">
                  <label>
                    <input type="checkbox"> Check me out
                  </label>
                </div>
                <button type="submit" class="btn btn-default">Submit</button>
              </form>
            </div>
          </div>
        </div>
            <div class="col-xs-12 col-md-6">
            <div class="panel panel-default">
            <div class="panel-body">
              Basic panel example
            </div>
          </div>
        </div>
      </div>
    </div>
    <!-- /container -->
  </body>

有两个使用自举器扒在一起的面板

1 个答案: