Question

我正在尝试在顶部布置一个带有搜索表单的简单仪表板页面。我无法找到一种方法来获得所需的列间距。下面是我迄今为止所取得的成就。

这是我的代码：

<body>

    <nav class="navbar navbar-light bg-faded">
        <a class="navbar-brand" href="#">Bootstrap Is Hard</a>
        <div id="user">
            <form id="form-login" class="form-inline pull-xs-right">
                <div class="form-group">
                    <label for="username">Username</label>
                    <input id="username" type="text" class="form-control"></input>
                </div>
                <div class="form-group">
                    <label for="password">Password</label>
                    <input id="password" type="password" class="form-control"></input>
                </div>
                <button id="btn-login" type="button" class="btn btn-primary">Login</button>
            </form>
        </div>
    </nav>

    <div class="container">

        <div class="row">
            <div class="col-xs-12">
                <div class="form-group">
                    <label for="sel-city" class="col-xs-2 col-form-label">City</label>
                    <div class="col-xs-10">
                        <select id="sel-city" class="form-control"></select>
                    </div>
                </div>
            </div>
            <div class="col-xs-12">
                <div class="input-group">
                    <input type="text" class="form-control" id="txt-earch" placeholder="Restaurant name...">
                    <span class="input-group-btn">
                        <button id="btn-search" class="btn btn-primary" type="button">Search</button>
                    </span>
                </div>
            </div>
        </div>

        <div class="row" style="height: 100%;">
            <div class="col-md-8" style="height: 100%;">
                <div id="map"></div>
            </div>
            <div class="col-md-4" style="height: 100%;">
                <ul id="list-establishments" class="list-group"></ul>
            </div>
        </div>

    </div>

</body> <!-- end container -->

我想在对齐的输入表单元素周围填充。

Answer 1

仅基于您的问题，很难确切地知道您要完成的是什么。

但根据我的理解，为什么不添加自己的style.css并输入类似的内容：

.form-group {
    padding-right: 20px;
}

Answer 2

就Forms的文档而言，看起来您需要将row类添加到form-group，同时将列放在form-group/row中} div。你现在不应该需要一个单独的行。

示例加价：

<div class="form-group row">

您还应该使用最新的Alpha.3版本（如果您还没有完全准备好），因为表单的某些问题现在已经修复，就像标签填充一样。 Alpha.3 Release Highlights。请记住，由于这仍然在Alpha版本中，因此会有更多变化。

工作示例：

＆＃13;

var map;
map = new google.maps.Map(document.getElementById('map'), {
  center: {
    lat: -34.397,
    lng: 150.644
  },
  zoom: 8
});

＆＃13;

html,
body {
  height: 100%;
  margin: 0;
  padding: 0;
}
#map {
  height: 35rem;
  width: 100%;
}
.navbar {
  margin-bottom: 1rem;
}

＆＃13;

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.3/css/bootstrap.min.css" rel="stylesheet" />
<nav class="navbar navbar-light bg-faded">
  <a class="navbar-brand" href="#">Bootstrap Is Hard</a>

  <div id="user">
    <form id="form-login" class="form-inline pull-xs-right">
      <label for="username">Username</label>
      <input id="username" type="text" class="form-control">
      <label for="password">Password</label>
      <input id="password" type="password" class="form-control">
      <button id="btn-login" type="button" class="btn btn-primary">Login</button>
    </form>
  </div>

</nav>

<div class="container">

  <form>
    <div class="form-group row">
      <label for="sel-city" class="col-xs-2 col-form-label">City</label>
      <div class="col-xs-10">
        <select id="sel-city" class="form-control"></select>
      </div>
    </div>
    <div class="form-group row">
      <div class="col-xs-12">
        <div class="input-group">
          <input type="text" class="form-control" id="txt-earch" placeholder="Restaurant name...">
          <span class="input-group-btn">
          <button id="btn-search" class="btn btn-primary" type="button">Search</button>
        </span>
        </div>
      </div>
    </div>
  </form>

  <div class="row">
    <div class="col-md-8">
      <div id="map"></div>
    </div>
    <div class="col-md-4">
      <ul id="list-establishments" class="list-group"></ul>
    </div>
  </div>

</div>
<script src="https://maps.googleapis.com/maps/api/js"></script>

＆＃13;

Bootstrap布局问题 - 没有列间距

2 个答案: