Html 只希望文本占据桌面上一半的页面-引导

对于我的横幅上的文字，我只希望它占据： -桌面上的一半页面 -平板电脑上的一半页面 -手机全页

原因是我不想让文字在桌面或平板电脑上掠过男人的脸。我有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 -->

---

我不确定你到底想要什么，但我建议使用

或

来更好地适应你的设备宽度

编辑：

这是一把小提琴

对于xs设备，Bootstrap默认为12列宽，因为它是mobile first framework

尝试以下操作：

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

...

---

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

基本上，我只想让文本占据半个屏幕（因此它将是col-6）对于超大屏幕和小屏幕，它将使用全宽列。我将宽度设置为8，因为对于较大屏幕，.container div已经有一些侧边距，所以6不会是屏幕的一半。。。

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