Question

对于我横幅上的文字，我只想要它： - 桌面上的一半页面 - 平板电脑的一半页面 - 手机上的整页

原因是我不希望文本在桌面或平板电脑上覆盖男人的脸。我有col-lg-7，但我认为这不对。

这是我的HTML：

    <div class="intro-header">
    <div class="container">

        <div class="row">
            <div class="col-lg-7">
                <div class="intro-message">
                    <h1>Adobe Exchange</h1><br>
                    <p class="subtitle">Search the most comprehensive online library of video tutorials, code samples to help you quickly learn how to create the web.</p>
                    <p class="intro-divider"></p>
                     <a href="#register" class="btn btn-primary btn-lg"><span>Register for a Free Account</span></a>

                </div>
            </div>
        </div>

    </div>
    <!-- /.container -->

</div>
<!-- /.intro-header -->

这是我的CSS：

    .intro-header {
    padding-top: 50px; /* If you're making other pages, make sure there is 50px of padding to make sure the navbar doesn't overlap content! */
    padding-bottom: 50px;
    text-align: left;
    color: #f8f8f8;
    background: url(http://www.onvia.com/sites/default/files/example-bg.jpg) no-repeat center center;
    background-size: cover;
}

Answer 1

试试这个：

<div class="col-xs-12 col-md-8 col-md-offset-2">
    ...
</div>

对于超小型和小型屏幕尺寸设备，它将使用全宽度列，对于中型和大型屏幕尺寸设备，它将使用填充8/12空间的列，并将其偏移2“单位”以中心为中心。

Answer 2

我不确定您的目的是什么，但我建议您使用<div class="col-md-7">或<div class="col-sm-7">来更好地适应您的设备宽度。

编辑：

这是一个小提琴 https://jsfiddle.net/j8gbrsgs/

对于xs设备，Bootstrap默认为12列宽，因为它是移动第一个框架

只希望文本占据桌面上一半的页面 - Bootstrap

2 个答案: