Question

当页面扩展到超过1200像素宽（lg）时，我的主页（以及模式）中的引导行都将超出面板容器。

我在这里创建了一个小提琴，但是我找不到一种使小提琴足够宽以模拟大（超过1200像素宽）的方法。

https://jsfiddle.net/bigalnz/f20rs3j8/13/

<body>
<div class="container">
<form class="form-horizontal" role="form">
  <div class="form-group">

    <div class="panel panel-default">
      <div class="panel-heading">
        <h3 class="panel-title">REMOVED FROM</h3>
      </div>
      <div class="panel-body">
        <div class="container">
          <div class="row">

            <div class="col-md-12" id="personSeizedFrom">
              <!--results here -->
              <div class="container"><div class="row">
              <div class="col-sm-10 col-md-10 font-weight-bold"><div class="row">
              <div class="col-sm-12 col-md-10">PERSON/Firstname/Middlename</div>
              <div class="col-sm-12 col-md-10">Some Address, Any town</div>
              <div class="col-sm-12 col-md-10">12/12/1980</div>
              </div></div></div></div>

            </div>
            <div class="col-md-12">
              <!-- Button to Open the Modal -->
              <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#queryPersonModal">+ Person</button>
            </div>
          </div>
        </div>
      </div>
    </div>

  </div>
</form>

我尝试将行包装在父级中，还向每个col添加col-lg-10（以及sm和md）。

为了说明我的屏幕上的样子：

也可以使按钮保持对齐。

页面的其他部分也存在类似的问题，因此我“在全球范围内”认错了。

Answer 1

Bootstrap 4 panel类不再可用。我已经使用card来达到期望的结果。您的代码运行良好，但使用了row和column太多了。尝试使用此简化代码。

.card-title {
    font-weight: 600;
    margin: 0 0 8px;
    font-size: 18px;
}

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
    <h3>REMOVED FROM</h3>
    <div class="card bg-light">
        <div class="card-body">
            <h5 class="card-title">PERSON/Firstname/Middlename</h5>
            <h5 class="card-title">Some Address, Any town</h5>
            <h5 class="card-title">12/12/1980</h5>
            <a href="#" class="btn btn-primary" data-toggle="modal" data-target="#queryPersonModal">+ Person</a>
        </div>
    </div>
</div>

Answer 2

在引导程序中，行的边距为负。尝试更换

<div class="col-sm-10 col-md-10 font-weight-bold"><div class="row">

作者

<div class="col-sm-10 col-md-10 font-weight-bold"><div class="row m-0">

删除边距。

Answer 3

在我看来，您过分了容器/行/列嵌套。尝试更简单的方法：

<div class="container">
    <form class="form-horizontal" role="form">
        <div class="form-group">

            <div class="panel panel-default">
                <div class="panel-heading">
                    <h3 class="panel-title">REMOVED FROM</h3>
                </div>
                <div class="panel-body">
                    <div class="container" id="wrapper-container">
                        <div class="row">
                            <div class="col-sm-4 col-md-12">PERSON/Firstname/Middlename</div>
                            <div class="col-sm-4 col-md-12">Some Address, Any town</div>
                            <div class="col-sm-4 col-md-12">12/12/1980</div>
                        </div>
                        <div class="row">
                            <div class="col-md-12">
                                <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#queryPersonModal">
                                    + Person
                                </button>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </form>
</div>

如果您希望面板主体的内容与标题对齐，请删除wrapper-container块，因为container类在左右添加了额外的填充。

Answer 4

我注意到您的标记结构不正确

please check this, this is the result you may want.
[https://jsfiddle.net/DayanandBotla/L1re6uzh/14/][1]

FYI....<br/>
Every col-XX will give padding-left and padding-right with 15px, you are seeing indent of it....thanks

https://jsfiddle.net/DayanandBotla/L1re6uzh/14/

面板外的引导行

4 个答案: