デスクトップ上で半分のページを占めるテキストのみ - ブートストラップ

Question

私のバナーのテキストは、次のようにしてください： - デスクトップのページの半分 - タブレットのページの半分 - モバイル

理由はデスクトップまたはタブレット上の人間の顔にテキストが表示されないようにすることです。私はcol-lg-7を持っていますが、それは正しいとは思いません。ここで

は私のHTMLです：

.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-md-7">や<div class="col-sm-7">を使用することをお勧めします：

<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ですより良い。

EDIT：それは、モバイル第1のフレームワークであるとして、ここでは

は、xsデバイス用の12列幅にフィドル https://jsfiddle.net/j8gbrsgs/

ブートストラップのデフォルトである

Answer 2

はこれを試してみてください：

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

超小型および小画面サイズのデバイスの場合は、全幅の列を使用し、中および大画面サイズのデバイスの場合はスペースの8/12を塗りつぶす列を使用し、2つの "単位"をオフセットして中央に配置します。