文章/答案/技术大牛

发布

社区首页 >问答首页 >在面板外部引导行

问在面板外部引导行
EN

Stack Overflow用户

提问于 2019-04-29 15:40:19

回答 4查看 568关注 0票数 0

当页面宽度超过1200px (lg)时，我在主页(和modals中)中的引导行将移出面板容器。

我已经在这里创建了一个小提琴，但是我找不到一种方法来使小提琴足够宽来模拟大(超过1200px宽)。

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 lg-10添加到每个列中(以及sm和md)。

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

让按钮左对齐也是很好的。

我有类似的问题在页面的其他部分，所以我做错了它“全球”。

html

css

twitter-bootstrap

回答 4

Stack Overflow用户

发布于 2019-04-29 16:01:13

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>

票数 1

Stack Overflow用户

发布于 2019-04-29 15:50:19

在bootstrap中，行的边距为负值。尝试替换

<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">

删除页边距。

票数 0

Stack Overflow用户

发布于 2019-04-29 16:01:42

在我看来，你对容器/行/列的嵌套做得太多了。尝试一些更简单的东西，比如：

<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类会添加额外的左右填充。

票数 0

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/55898893

复制

相似问题

问在面板外部引导行
EN

回答 4

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问在面板外部引导行EN

回答 4

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问在面板外部引导行
EN