我怎樣才能文本引導山坳裏面包裹

我有以下標記：我怎樣才能文本引導山坳裏面包裹

<div class="row"> 
    <div class="col"> 
    </div> 
    <div class="col-auto"> 
     <h1 class='headline'>Pardon Our Dust! We Are Building Something Great!</h1> 
    </div> 
    <div class="col"> 
    </div> 
</div>

樣式爲引導和下面的CSS：

h1, h2, h3, h4, h5, h6, p, a { 
font-family: 'Raleway', 'Droid Sans'; 
color: black; 
line-height: 120%; 
} 
.headline { 
text-align: center; 
font-weight: bold; 
}

當低於990px屏幕寬度逢低它應該在多行上打印，但滾動條只是彈出。如果行高度不擴大，我覺得它會破壞使用流體容器的目的。任何關於如何解決這個問題的推薦？

這裏是我得到：http://www.beehivefinancial.com/fap/

來源

2017-08-27 Christopher Jordan Bigelow

似乎很適合我，因爲它應該。你能提供一個演示問題的小提琴嗎？ –

@DarrenH這是我看到http://ec2-34-228-162-18.compute-1.amazonaws.com/fap/index.php –

我看不出你提供的代碼中的任何不當行爲。也許問題出在代碼的其他部分，是不是有其他可能會干擾的CSS？ – Tedds

我想這個問題是在HTML，嘗試應用類.col-md-offset-X代替emply列，即：

<div class="row"> 
    <div class="col.col-md-10 .col-md-offset-1"> 
     <h1 class="headline">Pardon Our Dust! We Are Building Something Great!</h1> 
    </div> 
</div>

相反的：

<div class="row"> 
    <div class="col"> 
    </div> 
    <div class=""> 
     <h1 class="headline">Pardon Our Dust! We Are Building Something Great!</h1> 
    </div> 
    <div class="col"> 
    </div> 
</div>

來源

2017-08-27 08:04:59 Tedds

所以這裏是我想出的解決方案。所以我看了一下bootstrap類，看起來寬度設置爲width:auto; max-width:none;。所以我把最好的，col-auto必須提供，插入我的網頁最大的990px，並以我個人的樣式表中創建以下類：

.auto-col { 
position: relative; 
min-height: 1px; 
padding: 0px 15px; 
-ms-flex: 0 0 auto; 
flex: 0 0 auto; 
width: 100%; 
max-width: 990px; 
}

其笨重的變通，但它固定我的問題。

來源

2017-08-27 10:51:21

我怎樣才能文本引導山坳裏面包裹

回答

相關問題