文章/答案/技术大牛

发布

问自带3，三列，第二中心
EN

Stack Overflow用户

提问于 2017-10-27 10:46:57

回答 3查看 136关注 0票数 0

我有引导带3的布局。内容基于12列中的10列。假设我有这样的东西：

<div class="container-fluid">
    <div class="row">
        <div class="col-lg-3 col-lg-offset-1">LEFT COL</div>
        <div class="col-lg-3">CENTER COL</div>
        <div class="col-lg-3 col-lg-pull-1 pull-right">RIGHT COL</div>
    </div>
</div>

有了这个，我有左和右列的位置，我希望它是-一个列的宽度，从浏览器窗口的左边和右边。我想把中间的列精确地放在中间，左右两列之间，使它们之间有相同的边距。

当使用偏移/拉/推引导类时，它们定位列的位置过左或偏右。

我已经创建了自己的解决方案类.center，它的工作方式类似于. class偏移量-1，只是我使用calc()函数从引导程序的百分比值中减去以像素为单位的偏移量。但在我看来，这个解决方案糟透了。

有什么建议吗？

编辑：

更好地描述样本图像

html

css

twitter-bootstrap

twitter-bootstrap-3

回答 3

Stack Overflow用户

发布于 2017-10-27 10:51:52

你能不能不对齐列中的内容来得到你想要的东西？

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>

<div class="container-fluid">
    <div class="row">
        <div class="col-xs-4">LEFT COL</div>
        <div class="col-xs-4 text-center">CENTER COL</div>
        <div class="col-xs-4 text-right">RIGHT COL</div>
    </div>
</div>

票数 1

Stack Overflow用户

发布于 2017-10-27 11:10:12

我相信这是不可能的。但是，您可以通过添加自定义类和附加标记来实现此结果。试试看，如果这对你有用，但什么也没有打破:P

HTML

<div class="container-fluid">
<div class="row">
    <div class="col-lg-3 col-lg-offset-1">LEFT COL</div>
    <div class="col-lg-4">
        <div class="col-center col-lg-9"> CENTER COL
        </div>
    </div>
    <div class="col-lg-3 col-lg-pull-1 pull-right">RIGHT COL</div>
</div>
</div>

CSS

.col-center {
    margin: auto;
    float: none;
}

票数 0

Stack Overflow用户

发布于 2017-10-27 13:41:44

您可以添加柔印盒和均匀分布科尔。

票数 0

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

原文链接：

https://stackoverflow.com/questions/46973267

复制

相似问题

问自带3，三列，第二中心
EN

回答 3

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问自带3，三列，第二中心EN

回答 3

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问自带3，三列，第二中心
EN