Bootstrap css：右对齐元素不在屏幕上

q0qdq0h2 于 2022-12-07 发布在 Bootstrap

关注(0)|答案(3)|浏览(163)

我在我的css中使用twitter bootstrap，下面的代码有一个对齐问题：
请在此处查看jsfiddle：http://jsfiddle.net/graphicsxp/99rhF/（确保放大html视图）

<div class="view-header">
 <span class="view-title">Recherche de mandats</span>
<div class="pull-right">
<a style="line-height: 30px; margin-right: 20px; vertical-align: bottom; float: left;">
    <span class="pointer">more options</span>
</a>
<form class="form-inline pull-left" placeholder="N° de contrat, nom/numéro de client" css-class="input-xxlarge">
    <input class="input-xxlarge ng-dirty" type="text" placeholder="N° de contrat, nom/numéro de client" ng-model="model">
    <button disabled="disabled" class="btn btn-info" type="submit"><i class="icon-search"></i>&nbsp;Rechercher</button>
</form>
</div>
 <div class="clearfix"></div>

<div class="pull-right">
</div>
 <div class="clearfix"></div>

    </div>

正如你所看到的，标签为“搜索者”的按钮太右了。我做错了什么？

twitter-bootstrap

来源：https://stackoverflow.com/questions/17608908/css-right-aligned-element-is-off-screen

3条答案

按热度按时间

zujrkrfu1#

你的按钮没有问题，它是包含元素。
使用以下内容更新css：

.view-header {
    background-color: #F5F5F5;
    border-bottom: 1px solid #BBBBBB;
    margin-bottom: 20px;
    padding: 10px 20px;
}

删除width: 100%; Div是块线元素，这意味着它们将填充其父元素。这应该可以解决您的问题。
请参阅：http://jsfiddle.net/99rhF/2/

赞(0）回复(0）举报 2022-12-07

zpgglvta2#

父元素的宽度为100%，但宽度计算中不包括填充，因此最终为100% + 40px。您可以通过将内容 Package 在容器中并填充来解决此问题。
http://jsfiddle.net/ndTuL/

.view-header {
    background-color: #f5f5f5;
    width: 100%;
    margin-bottom: 20px;
    border-bottom: solid 1px #bbbbbb;
}

.content-wrap {
        padding: 10px 20px 10px 20px;
}

赞(0）回复(0）举报 2022-12-07

dwbf0jvd3#

首先，我知道我来晚了：）
第二-@Jamie Hutber有一个非常好和有效的答案。这里没有任何争论-它应该仍然是肯定的公认答案。
第三-以下是我遇到的问题，以及我是如何解决的：
于飞：

<!DOCTYPE html>
<html>
<head>
    <?php echo $str->head; ?>
</head>
<body>
    <footer>
        &copy; Copyright 2021-$currentYear | All Rights Reserved | No Unauthorized Use Permitted | JPeG Web Development
    </footer>
</body>
</html>

<footer>也是一个块行元素，所以不需要width。
CSS

body {
    background-color: #f8f3ed;
    max-width: 1200px;
    display: flex;
    flex-direction: column;
    margin-bottom: 2rem;
}

footer {
    display: flex;
    flex-direction: row;
    height: 1.5rem;
    font-size: 1rem;
    position: absolute;
    bottom: 0px;
    right: 0px;
    overflow: hidden;
    max-width: 1200px;
    padding: 5px;
}

需要注意的是，position: absolute;会弄乱任何text-direction并使其溢出，* 特别是如果您尝试向其添加width: 100% *。无论您如何滚动，right和bottom都会将其粘在右下角。
这并不完全是这个问题所问的，但我认为这可能是很好的人看到一些替代的方式来有这个问题，并解决它。

赞(0）回复(0）举报 2022-12-07

我来回答

Bootstrap css：右对齐元素不在屏幕上

3条答案

相关问题

热门标签

最新问答