只希望文本佔用桌面上的一半頁面 - Bootstrap

對於我的橫幅上的文本，我只希望它佔用： - 桌面上的一半的頁面 - 平板電腦頁面的一半 - 完整頁面手機只希望文本佔用桌面上的一半頁面 - Bootstrap

原因是我不希望文字在桌面或平板電腦上覆蓋男人的臉。我有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; 
}

來源

2016-05-23 user3075987

不知道你會在這裏究竟是什麼，但我會建議使用<div class="col-md-7">或<div class="col-sm-7">以適應您的設備寬度更好。

編輯：

這裏是一個小提琴 https://jsfiddle.net/j8gbrsgs/

引導默認爲12列的寬度爲XS設備，因爲它是一個移動第一框架

來源

2016-05-23 21:12:00

嘗試這種情況：

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

對於超小型和小型屏幕尺寸的設備，它將使用全寬度列，並適用於中型和大型屏幕尺寸的開發它將使用填充空間的8/12的柱子，並以2「單位」偏移它以居中。

來源

2016-05-23 21:14:15

基本上，我只想讓文本佔用一半的屏幕（所以它會是col-6），直到對於超小和小屏幕尺寸，它將使用全寬列。 – user3075987

我將寬度設置爲8，因爲對於較大的屏幕，.container div已經有一些邊距，所以6不會完全屏蔽一半。 –

只希望文本佔用桌面上的一半頁面 - Bootstrap

回答

相關問題